# rn-drawer
URL: /docs/native/components/drawer

Slide-in side panel with animated entrance, backdrop, and swipe-to-dismiss support.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-drawer
```

**Dependencies:**
- [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler)
- [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)
- [react-native-worklets](https://www.npmjs.com/package/react-native-worklets)

## Usage

```tsx
import { Drawer } from '@/components/docyrus-native/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'` |