DeleteConfirmDialog

Modal confirmation dialog for delete operations with customizable title, description, and pending state.

iOSAndroid

Preview DeleteConfirmDialog 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-delete-confirm-dialog

Usage

import { DeleteConfirmDialog } from '@/components/docyrus-native/delete-confirm-dialog';

const [open, setOpen] = useState(false);

<DeleteConfirmDialog
  open={open}
  onOpenChange={setOpen}
  objectName="item"
  count={3}
  onConfirm={async () => {
    await deleteItems();
  }}
/>

Custom Labels

<DeleteConfirmDialog
  open={open}
  onOpenChange={setOpen}
  objectName="record"
  count={1}
  onConfirm={handleDelete}
  title="Remove this record?"
  description="This record will be permanently removed from the system."
  confirmLabel="Remove"
  cancelLabel="Keep"
/>

With Pending State

<DeleteConfirmDialog
  open={open}
  onOpenChange={setOpen}
  objectName="file"
  count={5}
  onConfirm={handleDelete}
  isPending={isDeleting}
/>

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	Controls the visibility of the dialog.
`onOpenChange`	`(open: boolean) => void`	—	Called when the dialog wants to open / close (Cancel, Android back). Not called while `isPending`.
`objectName`	`string`	—	Object type being deleted (used in the generated title / description; pluralized with `s` when `count !== 1`).
`count`	`number`	—	Number of items being deleted.
`onConfirm`	`() => void \| Promise<void>`	—	Called when the confirm button is pressed. The dialog does not close itself — close it (or set `isPending`) from your handler.
`isPending`	`boolean`	`false`	Disables both buttons, shows a spinner and `t('ui.common.deleting', 'Deleting...')` on the confirm button, and blocks dismissal.
`title`	`string`	`t('ui.deleteConfirmDialog.title', 'Delete {count} {object}?')`	Custom title (native extra).
`description`	`string`	`t('ui.deleteConfirmDialog.description', 'This will permanently delete {count} {object}. This action cannot be undone.')`	Custom description (native extra).
`confirmLabel`	`string`	`t('ui.common.delete', 'Delete')`	Confirm button label (native extra). Replaced by the "Deleting..." label while pending.
`cancelLabel`	`string`	`t('ui.common.cancel', 'Cancel')`	Cancel button label (native extra).
`className`	`string`	—	Additional classes for the dialog card.

Default copy is read through useUiTranslation() using the same ui.common.* keys as the web dialog, so one app translation catalog covers both platforms. {count} and {object} are replaced after translation.

Components

Component	Description
`DeleteConfirmDialog`	Centered modal confirmation for delete operations.

Type Exports

Type	Description
`DeleteConfirmDialogProps`	Props for the DeleteConfirmDialog component.

Breaking changes

confirmLabel / cancelLabel no longer default to the literal 'Delete' / 'Cancel' — they fall back to t('ui.common.delete') / t('ui.common.cancel') (same English text without a provider). The generated title / description are now translatable through ui.deleteConfirmDialog.title / ui.deleteConfirmDialog.description.

DeleteConfirmDialog

On this page