AlertDialog

Confirmation dialog with customizable title, description, variant colors, and action buttons.

iOSAndroid

Preview AlertDialog 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-alert-dialog

Required Packages(1 package)

pnpm add react-native-reanimated

Usage

import { AlertDialog } from '@/components/docyrus-native/alert-dialog';

<AlertDialog
  title="Delete item?"
  description="This action cannot be undone."
  variant="destructive"
  onConfirm={() => handleDelete()}
  onCancel={() => console.log('cancelled')}
/>

API Reference

Prop	Type	Default	Description
`visible`	`boolean`	—	Controlled visibility state
`onConfirm`	`() => void`	—	Confirm button handler
`onCancel`	`() => void`	—	Cancel button handler
`title`	`string`	`'Are you sure?'`	Dialog title text
`description`	`string`	—	Dialog description text
`confirmText`	`string`	`'Confirm'`	Confirm button label
`cancelText`	`string`	`'Cancel'`	Cancel button label
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Dialog size
`variant`	`'default' \| 'destructive' \| 'success' \| 'warning'`	`'default'`	Confirm button color variant
`backdropOpacity`	`'light' \| 'medium' \| 'dark'`	`'medium'`	Backdrop darkness level
`animationType`	`'none' \| 'slide' \| 'fade'`	`'fade'`	Modal animation type
`trigger`	`ReactNode \| ((opts: { onPress: () => void }) => ReactNode)`	—	Custom trigger element or render function
`triggerLabel`	`string`	—	Default trigger button label
`className`	`string`	—	Additional CSS classes
`backdropClassName`	`string`	—	Backdrop CSS classes
`contentClassName`	`string`	—	Content area CSS classes
`titleClassName`	`string`	—	Title text CSS classes
`descriptionClassName`	`string`	—	Description text CSS classes
`confirmButtonClassName`	`string`	—	Confirm button CSS classes
`cancelButtonClassName`	`string`	—	Cancel button CSS classes
`triggerClassName`	`string`	—	Trigger CSS classes

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.alertDialog.title`	Are you sure?	Default title (`title` prop wins)
`ui.alertDialog.confirm`	Confirm	Confirm button (`confirmText` prop wins)
`ui.common.cancel`	Cancel	Cancel button (`cancelText` prop wins)

Type Exports

Type	Description
`AlertDialogProps`	Props for AlertDialog component
`AlertDialogVariant`	`'default' \| 'destructive' \| 'success' \| 'warning'`
`AlertDialogSize`	`'sm' \| 'md' \| 'lg'`