AlertDialog

Installation

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

yarn
npm
bun
pnpm
yarn add @tamagui/alert-dialog

In order to use this component independently of tamagui, you'll first need to install the @tamagui/portal package:

yarn
npm
bun
pnpm
yarn add @tamagui/portal

Then add PortalProvider to the root of your app:

App.tsx
import { PortalProvider } from '@tamagui/portal'
import YourApp from './components/YourApp'

function App() {
  return (
    <PortalProvider shouldAddRootHost>
      <YourApp />
    </PortalProvider>
  )
}

export default App

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>
  )
}