# Map Sheet

Bottom panel that stays on screen over a map, resting at peek, half and full heights. A flick snaps it to the right stop, and the map dims as the panel rises.

> Composed · Pro · Overlays — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/map-sheet
```

## Import

```tsx
import { MapSheet } from "@/components/ui/map-sheet/map-sheet";
```

## Variants

- `nearby` — Nearby: `npx @lumioui/cli add pro/map-sheet-nearby`
- `places` — Places: `npx @lumioui/cli add pro/map-sheet-places`
- `ride` — Ride: `npx @lumioui/cli add pro/map-sheet-ride`

## Props

### MapSheet

| Prop | Type | Notes |
| --- | --- | --- |
| `detents?` | `MapSheetDetent[]` | Resting heights, low → high. Values ≤ 1 are fractions of the container height, larger values are points (the bottom safe-area inset is added to point detents). Default `[148, 0.5, 0.92]` — peek / half / full. |
| `index?` | `number` | Controlled detent index. |
| `defaultIndex?` | `number` | Uncontrolled initial detent index. Default 0 (peek). |
| `onIndexChange?` | `(index: number) => void` | Fires when a drag, tap or a11y action settles the sheet on another detent. |
| `position?` | `SharedValue<number>` | Shared value written with the sheet's top edge (pt from the container top) every frame — drive a floating button with it (see MapSheet.Float). |
| `onPositionChange?` | `(top: number, visibleHeight: number) => void` | Fires on the JS thread when the sheet settles: its top edge and visible height. |
| `header?` | `React.ReactNode` | Always-visible top part (search row, trip status) — stays on screen at peek and drags the sheet. |
| `children?` | `React.ReactNode` | Sheet body. Scrolls at the top detent. |
| `scrollable?` | `boolean` | Wrap children in a ScrollView. Default true — set false to lay out your own list. |
| `grabber?` | `boolean` | Show the grabber pill. Default true. Tapping it steps to the next detent. |
| `accessibilityLabel?` | `string` | Screen-reader label for the grabber. Default "Sheet". |
| `detentLabels?` | `string[]` | Spoken names for each detent ("Collapsed", "Half", "Expanded"). |
| `className?` | `string` | Classes for the panel. |
| `contentClassName?` | `string` | Classes for the content container. |
| `scrim?` | `boolean` | Dim the map as the sheet rises past half (0 at half → 28% at full). Default true. |

### MapSheetFloat

| Prop | Type | Notes |
| --- | --- | --- |
| `position` | `SharedValue<number>` | The same shared value passed to MapSheet's `position`. |
| `gap?` | `number` | Gap between the sheet's top edge and this element, pt. Default 12. |
| `hideAbove?` | `number` | Fade out once the sheet's top edge rises above this y (pt from the container top). Default 160. |
| `align?` | `"left" | "right"` | Side to pin to. Default "right". |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

## Icons rendered

- `pointer` — /icons.html?i=pointer

Source: https://lumioui.com/components/map-sheet