Alert Dialog

Alert Dialog Primitive Button Component Text Component

Demo

A modal dialog that interrupts the user with important content and expects a response.

Installation

CLI

npx @react-native-reusables/cli@latest add alert-dialog

Manual

Dependencies

Before copy/pasting, add the alert-dialog primitive, the button component, and the text component to your project.

Copy/paste the following code to ~/components/ui/alert-dialog.tsx:

Usage

Caution

Requires a <PortalHost /> as the last child of your <Root/> (app/_layout.tsx) component

import { PortalHost } from '~/components/primitives/portal';

function Root() {
  return (
    <>
      <Stack />
      {/* Default Portal Host (one per app) */}
      <PortalHost />
    </>
  );
}

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '~/components/ui/alert-dialog';
import { Button } from '~/components/ui/button';
import { Text } from '~/components/ui/text';

function AlertDialogScreen() {
  return (
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant='outline'>
            <Text>Show Alert Dialog</Text>
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your account and remove
              your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>
              <Text>Cancel</Text>
            </AlertDialogCancel>
            <AlertDialogAction>
              <Text>Continue</Text>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
  );
}

Props

AlertDialog

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
open	boolean	(optional)
onOpenChange	(value: boolean) => void	(optional)
defaultOpen	boolean	(optional)

AlertDialogTrigger

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)

AlertDialogContent

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
forceMount	true | undefined	(optional)
alignOffset	number	Native Only (optional)
insets	Insets	Native Only (optional)
avoidCollisions	boolean	Native Only (optional)
align	’start’ | ‘center’ | ‘end’	Native Only (optional)
side	’top’ | ‘bottom’	Native Only (optional)
sideOffset	number	Native Only (optional)
disablePositioningStyle	boolean	Native Only (optional)
onOpenAutoFocus	(ev: Event) => void	Web Only (optional)
onCloseAutoFocus	(ev: Event) => void	Web Only (optional)
onEscapeKeyDown	(ev: Event) => void	Web Only (optional)

AlertDialogHeader

Extends View props

AlertDialogTitle

Extends Text props

Prop	Type	Note
asChild	boolean	(optional)

AlertDialogDescription

Extends Text props

Prop	Type	Note
asChild	boolean	(optional)

AlertDialogFooter

Extends View props

AlertDialogCancel

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)

AlertDialogAction

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)