GitHub
wwwwwwwwwwwwwwwwwww

AlertDialog

Show an alert prompt in a dialog

import { AlertDialog, Button, XStack, YStack } from 'tamagui'



export function AlertDialogDemo() {

  return (

    <AlertDialog native>

      <AlertDialog.Trigger asChild>

        <Button>Show Alert</Button>

      </AlertDialog.Trigger>



      <AlertDialog.Portal>

        <AlertDialog.Overlay
          key="overlay"
          animation="quick"
          opacity={0.5}
          enterStyle={{ opacity: 0 }}
          exitStyle={{ opacity: 0 }}
        />

        <AlertDialog.Content
          bordered
          elevate
          key="content"
          animation={[
            'quick',
            {
              opacity: {
                overshootClamping: true,
              },
            },
          ]}
          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
          x={0}
          scale={1}
          opacity={1}
          y={0}
        >

          <YStack space>

            <AlertDialog.Title>Accept</AlertDialog.Title>

            <AlertDialog.Description>

              By pressing yes, you accept our terms and conditions.

            </AlertDialog.Description>



            <XStack gap="$3" justifyContent="flex-end">

              <AlertDialog.Cancel asChild>

                <Button>Cancel</Button>

              </AlertDialog.Cancel>

              <AlertDialog.Action asChild>

                <Button theme="active">Accept</Button>

              </AlertDialog.Action>

            </XStack>

          </YStack>

        </AlertDialog.Content>

      </AlertDialog.Portal>

    </AlertDialog>

  )

}

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:

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

AlertDialog

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

Props

  • native

    boolean

    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:

    Props

  • forceMount

    boolean

    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:

    Props

  • forceMount

    boolean

    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:

    Props

  • forceMount

    boolean

    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.

    Props

  • displayWhenAdapted

    boolean

    By default Cancel elements hide when Adapt is active. If set to true, they will show when adapted.

    • PortalProvider

    Props

  • shouldAddRootHost

    boolean

    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>

          {/* rest of your page, including the Dialog... */}

        </PortalProvider>

      )

    }

    Next

    Introduction

    Edit this page on GitHub.