Component
Bottom sheet
A drag-driven panel that rises from the bottom edge, with snap points the user can drag between, scroll-aware content, and a swipe-down-to-dismiss gesture.
The primitive
bottom sheet.tsx
<NativeBottomSheet isOpen={open} onClose={() => setOpen(false)} surface="plain" header={<p>Choose an option</p>}>
<div className="p-4">...</div>
</NativeBottomSheet>Example
Recipient bank accounts are listed here instead of on a full screen, so choosing one doesn't interrupt the transfer flow underneath it.
bottom-sheet-example.tsx
<NativeBottomSheet isOpen={open} onClose={() => setOpen(false)} surface="plain" header={<p>Recipient bank</p>}>
<NativeRow label="Chase Bank" sublabel="Checking, ending 4821" onPress={onSelect} />
<NativeRow label="Ally Bank" sublabel="Savings, ending 0193" onPress={onSelect} />
</NativeBottomSheet>Capabilities
| Prop | Type | Description |
|---|---|---|
| childrenrequired | ReactNode | — |
| isOpenrequired | boolean | — |
| onCloserequired | () => void | — |
| snapPoints | number[] | — |
| initialSnap | number | — |
| header | ReactNode | — |
| roundedTop | boolean | — |
| disableDrag | boolean | — |
| surface | NativeBottomSheetSurface | — |
| closeOnBackdropPress | boolean | — |
| lockBodyScroll | boolean | — |
| className | string | — |