Map Sheet

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/map-sheet

Usage

import { MapSheet } from "@/components/ui/map-sheet/map-sheet";
<MapSheet />

Examples

Nearby

A delivery app's "near you" sheet.

Places

A maps app's search results.

Ride

A ride app over a live map.

API reference

MapSheet

Prop Type Default
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 Default
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 —