Components
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-drawerRequired Packages(3 packages)
pnpm add react-native-gesture-handler react-native-reanimated react-native-workletsUsage
import { Drawer } from '@/components/docyrus-native/drawer';
<Drawer
visible={isOpen}
onClose={() => setIsOpen(false)}
side="left"
header={<Text>Menu</Text>}
>
<Text>Drawer content goes here.</Text>
</Drawer>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
visible | boolean | — | Controlled visibility state |
onClose | () => void | — | Close handler |
side | 'left' | 'right' | 'left' | Side the drawer slides in from |
width | number | 300 | Drawer width in pixels |
variant | 'default' | 'elevated' | 'minimal' | 'glass' | 'default' | Visual variant |
backdropOpacity | 'light' | 'medium' | 'dark' | 'medium' | Backdrop darkness level |
header | ReactNode | — | Header content element |
footer | ReactNode | — | Footer content element |
swipeToDismiss | boolean | true | Enable swipe gesture to close |
animationDuration | number | 200 | Open/close animation duration in ms |
children | ReactNode | — | Drawer body content |
trigger | ReactNode | ((opts: { onPress: () => void }) => ReactNode) | — | Custom trigger element or render function |
triggerLabel | string | 'Open Drawer' | Default trigger button label |
hideTrigger | boolean | true | Hide default trigger when no custom trigger |
className | string | — | Additional CSS classes |
backdropClassName | string | — | Backdrop CSS classes |
contentClassName | string | — | Content area CSS classes |
headerClassName | string | — | Header CSS classes |
footerClassName | string | — | Footer CSS classes |
triggerClassName | string | — | Trigger CSS classes |
Type Exports
| Type | Description |
|---|---|
DrawerProps | Props for Drawer component |
DrawerSide | 'left' | 'right' |
DrawerVariant | 'default' | 'elevated' | 'minimal' | 'glass' |