AlertDialog

<Highlights features={[ Comes with styling, completely customizable and themeable., Accepts animations, themes, size props and more., Accessible with dev-time checks to ensure ARIA props., ]} />

Installation

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

npm install @tamagui/alert-dialog

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

npm install @tamagui/portal

Then add PortalProvider to the root of your app:

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

AlertDialog

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

<PropsTable data={[ { name: 'native', type: 'boolean', required: false, description: When true, on iOS it will render as a native AlertDialog., }, ]} />

AlertDialog.Trigger

Just Tamagui Props.

AlertDialog.Portal

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

<PropsTable data={[ { name: 'forceMount', type: 'boolean', required: false, description: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries., }, ]} />

AlertDialog.Content

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

Beyond Tamagui Props, adds:

<PropsTable data={[ { name: 'forceMount', type: 'boolean', required: false, description: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries., }, ]} />

AlertDialog.Overlay

Displays behind Content. Beyond Tamagui Props, adds:

<PropsTable data={[ { name: 'forceMount', type: 'boolean', required: false, description: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries., }, ]} />

AlertDialog.Title

Required. Can wrap in VisuallyHidden to hide.

Defaults to H2, see Headings.

AlertDialog.Description

Required. Can wrap in VisuallyHidden to hide.

Defaults to Paragraph, see Paragraph.

AlertDialog.Cancel

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

<PropsTable data={[ { name: 'displayWhenAdapted', type: 'boolean', description: By default Cancel elements hide when Adapt is active. If set to true, they will show when adapted., }, ]} />

PortalProvider

<PropsTable data={[ { name: 'shouldAddRootHost', type: 'boolean', required: false, description: Defines whether to add a default root host or not., }, ]} />

Examples

Inside native modals

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