Skip to content

Alert Dialog Primitive

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

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/alert-dialog
import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
import { Text } from 'react-native';
function Example() {
return (
<AlertDialogPrimitive.Root>
<AlertDialogPrimitive.Trigger>
<Text>Show Alert Dialog</Text>
</AlertDialogPrimitive.Trigger>
<AlertDialogPrimitive.Portal>
<AlertDialogPrimitive.Overlay>
<AlertDialogPrimitive.Content>
<AlertDialogPrimitive.Title>Are you absolutely sure?</AlertDialogPrimitive.Title>
<AlertDialogPrimitive.Description>
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
</AlertDialogPrimitive.Description>
<AlertDialogPrimitive.Cancel><Text>Cancel</Text></AlertDialogPrimitive.Cancel>
<AlertDialogPrimitive.Action><Text>Continue</Text></AlertDialogPrimitive.Action>
</AlertDialogPrimitive.Content>
</AlertDialogPrimitive.Overlay>
</AlertDialogPrimitive.Portal>
</AlertDialogPrimitive.Root>
);
}

Extends View props

PropTypeNote
asChildboolean(optional)
openboolean(optional)
onOpenChange(value: boolean) => void(optional)
defaultOpenboolean(optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)

Extends View props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined;(optional)
PropTypeNote
children*React.ReactNode
forceMounttrue | undefined(optional)
hostNamestringWeb Only (optional)
containerHTMLElement | null | undefinedWeb Only (optional)

Extends View props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined(optional)
alignOffsetnumberNative Only (optional)
insetsInsetsNative Only (optional)
avoidCollisionsbooleanNative Only (optional)
align’start’ | ‘center’ | ‘end’Native Only (optional)
side’top’ | ‘bottom’Native Only (optional)
sideOffsetnumberNative Only (optional)
disablePositioningStylebooleanNative Only (optional)
onOpenAutoFocus(ev: Event) => voidWeb Only (optional)
onCloseAutoFocus(ev: Event) => voidWeb Only (optional)
onEscapeKeyDown(ev: Event) => voidWeb Only (optional)

Extends Text props

PropTypeNote
asChildboolean(optional)

Extends Text props

PropTypeNote
asChildboolean(optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)

Must be used within a Root component. It provides the following values from the alert-dialog: open, and onOpenChange.