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.

Standalone

bottom sheet.tsx

<NativeBottomSheet isOpen={open} onClose={() => setOpen(false)} surface="plain" header={<p className={nativeMobileSheetHeaderTextClassName}>Choose an option</p>}>
  <p className={nativeMobileSheetProseClassName}>...</p>
</NativeBottomSheet>

Example

Options listed here instead of on a full screen, so choosing one doesn't interrupt the flow underneath.

bottom-sheet-example.tsx

<NativeBottomSheet isOpen={open} onClose={() => setOpen(false)} surface="plain" header={<p className={nativeMobileSheetHeaderTextClassName}>Select account</p>}>
  <NativeSection standalone>
    <NativeRow label="Chase Bank" sublabel="Checking, ending 4821" onPress={onSelect} />
    <NativeRow label="Ally Bank" sublabel="Savings, ending 0193" onPress={onSelect} />
  </NativeSection>
</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	-