AlertDialog

Show an alert prompt in a dialog.

Installation

Alert Dialog is already installed in tamagui, or you can install it independently:

npm install @tamagui/alert-dialog

Anatomy

import { AlertDialog } from 'tamagui' // or '@tamagui/alert-dialog'

export default () => (
  <AlertDialog>
    <AlertDialog.Trigger />
    <AlertDialog.Portal>
      <AlertDialog.Overlay />
      <AlertDialog.Content>
        <AlertDialog.Title />
        <AlertDialog.Description />
        <AlertDialog.Cancel />
        {/* ... */}
      </AlertDialog.Content>
    </AlertDialog.Portal>
  </AlertDialog>
)

API Reference

Contains every component for the AlertDialog. Shares all Dialog Props, except modal which is on by default. Adds:

Just Tamagui Props.

Renders AlertDialog into appropriate container. Beyond Tamagui Props, adds:

Main container for AlertDialog content, this is where you should apply animations.

Beyond Tamagui Props, adds:

Displays behind Content. Beyond Tamagui Props, adds:

Required. Can wrap in VisuallyHidden to hide.

Defaults to H2, see Headings.

Required. Can wrap in VisuallyHidden to hide.

Defaults to Paragraph, see Paragraph.

Closes the AlertDialog, accepts all YStack props. Recommended to use with your own component and asChild.

Examples

If you're using native modals (maybe from react-navigation), you'll notice the Dialogs won't show up inside the modal. To get around this, you should wrap your screen inside PortalProvider, like so:

import { PortalProvider } from 'tamagui'

// this component used in react-navigation/expo-router with `presentation: "modal"`
export function Page() {
  return (
    <PortalProvider>
      {/* rest of your page, including the Dialog... */}
    </PortalProvider>
  )
}