Component
Drawer
A panel that slides in from a screen edge, sized as a percentage of the viewport with sensible min and max widths, dismissed by backdrop tap or Escape.
The primitive
drawer.tsx
<NativeDrawer open={open} onClose={() => setOpen(false)} surface="plain">
<div className="p-4">...</div>
</NativeDrawer>Example
Holds the account menu, anchored to the screen edge so settings stay reachable without leaving the current screen.
drawer-example.tsx
<NativeDrawer open={open} onClose={() => setOpen(false)} surface="plain" side="right">
<NativeRow label="Profile" onPress={onSelectProfile} />
<NativeRow label="Linked banks" onPress={onSelectBanks} />
<NativeRow label="Sign out" onPress={onSignOut} />
</NativeDrawer>Capabilities
| Prop | Type | Description |
|---|---|---|
| openrequired | boolean | — |
| onCloserequired | () => void | — |
| childrenrequired | ReactNode | — |
| side | NativeDrawerSide | — |
| widthPercent | number | — |
| maxWidthPx | number | — |
| minWidthPx | number | — |
| surface | NativeDrawerSurface | — |
| closeOnBackdropPress | boolean | — |
| lockBodyScroll | boolean | — |
| className | string | — |