Dialog

The Dialog component displays a modal dialog overlaying the app content. It's used to present important information, confirmations, or simple input forms that require immediate user attention.

It provides:

• Centered modal dialog with backdrop
• Alert-style composition with icon support
• Composable API for custom layouts
• Multiple action buttons support
• Block or interactive backdrop options

Usage

The Dialog.Alert component provides a pre-styled dialog with title, description, icon, and action buttons. This is the quickest way to show confirmation dialogs or alerts.

Show Dialog

function DialogAlertUsage() {
  const [visible, setVisible] = useState(false)

  return (
    <View>
      <Button onPress={() => setVisible(true)}>Show Dialog</Button>
      <Dialog.Alert
        visible={visible}
        onDismiss={() => setVisible(false)}
        title="This is a Dialog overlay"
        description="You can add any content here, and it will appear as a modal. Tap outside the modal or press the button below to dismiss it."
        icon={
          <Icon
            family="Ionicons"
            name="information-circle"
            size={48}
            status="accent"
          />
        }
        actions={[
          {children: 'Cancel', onPress: () => setVisible(false)},
          {children: 'Confirm', onPress: () => setVisible(false)},
        ]}
      />
    </View>
  )
}

Without Icon

Display a dialog without an icon for simpler alerts or confirmations. The dialog automatically adjusts its layout based on the presence of an icon.

Dialog Without Icon

function DialogWithoutIcon() {
  const [visible, setVisible] = useState(false)

  return (
    <View>
      <Button onPress={() => setVisible(true)}>Dialog Without Icon</Button>
      <Dialog.Alert
        visible={visible}
        onDismiss={() => setVisible(false)}
        title="Confirm Action"
        description="Are you sure you want to proceed with this action?"
        actions={[
          {children: 'Cancel', onPress: () => setVisible(false)},
          {
            children: 'Confirm',
            onPress: () => setVisible(false),
            mode: 'filled',
          },
        ]}
      />
    </View>
  )
}

Single Action

Dialogs can have a single action button for simple acknowledgments or dismissals. This is useful for informational messages that only need confirmation.

Single Action Dialog

function DialogSingleAction() {
  const [visible, setVisible] = useState(false)

  return (
    <View>
      <Button onPress={() => setVisible(true)}>Single Action Dialog</Button>
      <Dialog.Alert
        visible={visible}
        onDismiss={() => setVisible(false)}
        title="Success!"
        description="Your changes have been saved successfully."
        icon={
          <Icon
            family="Ionicons"
            name="checkmark-circle"
            size={48}
            status="success"
          />
        }
        actions={[
          {children: 'OK', onPress: () => setVisible(false), mode: 'filled'},
        ]}
      />
    </View>
  )
}

Block Backdrop

Use the backdropBehavior="block" prop to prevent dismissing the dialog by tapping the backdrop. This forces users to interact with the dialog actions.

Block Backdrop

function DialogBlockBackdrop() {
  const [visible, setVisible] = useState(false)

  return (
    <View>
      <Button onPress={() => setVisible(true)}>Block Backdrop</Button>
      <Dialog.Alert
        visible={visible}
        onDismiss={() => setVisible(false)}
        backdropBehavior="block"
        title="Important Notice"
        description="This dialog cannot be dismissed by tapping outside. You must press a button."
        icon={
          <Icon family="Ionicons" name="warning" size={48} status="warning" />
        }
        actions={[
          {
            children: 'I Understand',
            onPress: () => setVisible(false),
            mode: 'filled',
          },
        ]}
      />
    </View>
  )
}

Composed Usage

For more control over the dialog layout, use the composable API with Dialog.Root, Dialog.Icon, Dialog.Title, Dialog.Content, and Dialog.Actions components.

Open Dialog

function DialogComposedUsage() {
  const [visible, setVisible] = useState(false)

  const onDismiss = () => {
    setVisible(false)
  }

  return (
    <View>
      <Button onPress={() => setVisible(true)}>Open Dialog</Button>

      <Dialog.Root visible={visible} onDismiss={onDismiss}>
        <Dialog.Icon>
          <Icon
            family="Ionicons"
            name="information-circle"
            size={48}
            status="accent"
          />
        </Dialog.Icon>
        <Dialog.Title>This is a Dialog overlay</Dialog.Title>
        <Dialog.Content>
          <Text>
            You can add any content here, and it will appear as a Dialog. Tap
            outside the dialog or press the button below to dismiss it.
          </Text>
        </Dialog.Content>

        <Dialog.Actions>
          <Dialog.Action onPress={onDismiss}>Cancel</Dialog.Action>
          <Dialog.Action onPress={onDismiss}>Confirm</Dialog.Action>
        </Dialog.Actions>
      </Dialog.Root>
    </View>
  )
}

Composed with Form

Create complex dialogs with forms and custom content using the composable API. This is perfect for input dialogs, confirmation forms, or any custom dialog layout.

Dialog with Form

function DialogComposedWithForm() {
  const [visible, setVisible] = useState(false)
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

  const onDismiss = () => {
    setVisible(false)
    setName('')
    setEmail('')
  }

  const onSubmit = () => {
    // Handle form submission
    onDismiss()
  }

  return (
    <View>
      <Button onPress={() => setVisible(true)}>Dialog with Form</Button>

      <Dialog.Root visible={visible} onDismiss={onDismiss}>
        <Dialog.Title>Contact Information</Dialog.Title>
        <Dialog.Content>
          <Text style={{marginBottom: 8}}>Please enter your details:</Text>
          <View style={{marginBottom: 12}}>
            <TextInput
              label="Name"
              value={name}
              onChangeText={setName}
              accessibilityLabel="Name input"
            />
          </View>
          <TextInput
            label="Email"
            value={email}
            onChangeText={setEmail}
            keyboardType="email-address"
            accessibilityLabel="Email input"
          />
        </Dialog.Content>

        <Dialog.Actions>
          <Dialog.Action onPress={onDismiss}>Cancel</Dialog.Action>
          <Dialog.Action onPress={onSubmit} mode="filled">
            Submit
          </Dialog.Action>
        </Dialog.Actions>
      </Dialog.Root>
    </View>
  )
}

Props

DialogBaseProps

Prop	Data Type	Default Value	Description
Extends	--	--	--
visible	boolean	--	Whether the Dialog is visible or not.
children	ReactNode	--	The content of the Dialog, which can be any React node.
onDismiss	() => void	--	Callback function that is called when the Dialog is dismissed.This is invoked whenever the Dialog becomes not visible, for example when the user taps on the backdrop (if `backdropBehavior` is set to 'dismiss') or when it is dismissed programmatically.
backdropBehavior	"interactive" | "block" | "dismiss"	dismiss	Control the behavior of the backdrop when the Dialog is visible.- 'interactive': The backdrop will be rendered and will allow user interactions on the backdrop itself. - 'block': The backdrop will be rendered and will block interactions with it. Tapping on the backdrop will not do anything. - 'dismiss': The backdrop will be rendered and used solely as a tap-to-dismiss surface. Tapping on the backdrop will trigger the `onDismiss` callback, but no other interactions with the backdrop are allowed.
style	StyleProp<ViewStyle>	--	Style for the container of the Dialog.
backdropStyle	StyleProp<ViewStyle>	--	Style for the backdrop of the Dialog.

DialogProps

Prop	Data Type	Default Value	Description
Extends	DialogBaseProps	--	Inherits properties from DialogBaseProps
icon	ReactNode	--	icon to be displayed at the top of the Dialog
title	string	--	title to be displayed below the icon
description	string	--	description to be displayed below the title
actions	ButtonProps[]	--	Actions to be displayed at the bottom of the Dialog. Multiple actions are rendered together in the Dialog's action area in the same order as they are provided in the array. If this prop is omitted or an empty array is provided, no action buttons are rendered.