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

Flexible modal dialog with preset types, header/footer configurations, and position options.

## Installation

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

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

## Usage

```tsx
import { Modal } from '@/components/docyrus-native/modal';

```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `visible` | `boolean` | — | Whether the modal is visible |
| `onClose` | `() => void` | — | Close handler |
| `onConfirm` | `() => void` | — | Confirm handler (for confirm/picker types) |
| `title` | `string` | — | Modal title |
| `closeOnOverlayPress` | `boolean` | — | Close on backdrop tap (auto-configured by modalType) |
| `size` | `'sm' \| 'md' \| 'lg' \| 'full'` | `'md'` | Modal width/height size |
| `position` | `'center' \| 'bottom'` | `'center'` | Modal position on screen |
| `variant` | `'default' \| 'elevated' \| 'bordered'` | `'default'` | Visual variant |
| `backdropOpacity` | `number` | `0.4` | Backdrop opacity (0 to 1) |
| `modalType` | `'default' \| 'info' \| 'confirm' \| 'picker' \| 'custom'` | `'default'` | Preset type (auto-configures header/footer) |
| `headerType` | `'none' \| 'title-close' \| 'title-actions'` | — | Header layout (auto-set by modalType unless custom) |
| `footerType` | `'none' \| 'actions'` | — | Footer layout (auto-set by modalType unless custom) |
| `confirmText` | `string` | `'Confirm'` | Confirm button label |
| `cancelText` | `string` | `'Cancel'` | Cancel button label |
| `header` | `ReactNode` | — | Custom header element |
| `footer` | `ReactNode` | — | Custom footer element |
| `children` | `ReactNode` | — | Modal body content |
| `className` | `string` | — | Additional CSS classes |
| `backdropClassName` | `string` | — | Backdrop CSS classes |
| `contentClassName` | `string` | — | Content area CSS classes |
| `headerClassName` | `string` | — | Header CSS classes |
| `titleClassName` | `string` | — | Title text CSS classes |
| `footerClassName` | `string` | — | Footer CSS classes |
| `accessibilityLabel` | `string` | — | Accessibility label for the modal |

### Modal Type Presets

| Type | Header | Footer | Close on overlay |
|------|--------|--------|------------------|
| `default` / `info` | title-close (if title set) | none | yes |
| `confirm` | none | actions | no |
| `picker` | title-actions | none | yes |
| `custom` | configurable | configurable | yes |

## Translation Keys

Built-in copy is read through `useUiTranslation()` — provide these keys via `<UiTranslationProvider>`. Without a provider the English fallback is shown.

| Key | English fallback | Used for |
|-----|------------------|----------|
| `ui.modal.confirm` | Confirm | Confirm button (`confirmText` prop wins) |
| `ui.common.cancel` | Cancel | Cancel button (`cancelText` prop wins) |
| `ui.modal.done` | Done | Done button of the `picker` modal |

## Type Exports

| Type | Description |
|------|-------------|
| `ModalProps` | Props for Modal component |
| `ModalType` | `'default' \| 'info' \| 'confirm' \| 'picker' \| 'custom'` |
| `ModalHeaderType` | `'none' \| 'title-close' \| 'title-actions'` |
| `ModalFooterType` | `'none' \| 'actions'` |
| `ModalSize` | `'sm' \| 'md' \| 'lg' \| 'full'` |
| `ModalPosition` | `'center' \| 'bottom'` |
| `ModalVariant` | `'default' \| 'elevated' \| 'bordered'` |