Components · Mobile only · Overlays
Bottom Sheet
AlphaiOS & Android
A sheet from the bottom with detents, a grabber and keyboard handling. Works in Expo Go; no native dependency.
Usage
@nexub/react-nativeWeb: Sheet / Drawer
import { BottomSheet } from '@nexub/react-native';
<BottomSheet open={open} onOpenChange={setOpen} detents={[0.5, 0.9]} title="Filters">…</BottomSheet>Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
BottomSheet props
| Prop | Type | Default | Description |
|---|---|---|---|
| openrequired | boolean | — | — |
| onOpenChangerequired | (open: boolean) => void | — | — |
| detents | SheetDetent[] | ['content'] | Heights the sheet rests at: 'content' (fits its content) or a 0–1 fraction of the screen. |
| title | string | — | — |
| childrenrequired | React.ReactNode | — | — |
| dismissable | boolean | true | Drag down, tap the scrim or Android back closes it. |
| scroll | boolean | — | Let the content scroll (long lists). |