Modal

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

iOSAndroid

Preview Modal on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

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

Required Packages(1 package)

pnpm add react-native-reanimated

Usage

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

<Modal
  visible={isOpen}
  onClose={() => setIsOpen(false)}
  title="Settings"
  modalType="default"
>
  <Text>Modal content goes here.</Text>
</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

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'`