ConfirmationDialog

A SwiftUI ConfirmationDialog component for presenting confirmation prompts.

iOS

tvOS

Included in Expo Go

GitHub

npm

Changelog

Recommended version:

~56.0.26

Expo UI ConfirmationDialog matches the official SwiftUI confirmationDialog API and presents an action sheet-style dialog with a title, actions, and an optional message.

ConfirmationDialog asking the user to confirm a destructive action

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic confirmation dialog

Use ConfirmationDialog.Trigger to define the visible element and ConfirmationDialog.Actions to provide the dialog buttons.

BasicConfirmationDialogExample.tsx

import { useState } from 'react';
import { Host, ConfirmationDialog, Button, Text } from '@expo/ui/swift-ui';

export default function BasicConfirmationDialogExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <ConfirmationDialog
        title="Are you sure?"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        titleVisibility="visible">
        <ConfirmationDialog.Trigger>
          <Button label="Show Dialog" onPress={() => setIsPresented(true)} />
        </ConfirmationDialog.Trigger>
        <ConfirmationDialog.Actions>
          <Button label="Confirm" onPress={() => setIsPresented(false)} />
          <Button label="Cancel" role="cancel" />
        </ConfirmationDialog.Actions>
      </ConfirmationDialog>
    </Host>
  );
}

Destructive action confirmation

Use role="destructive" on a Button inside ConfirmationDialog.Actions to style it as a destructive action.

DestructiveConfirmationDialogExample.tsx

import { useState } from 'react';
import { Host, ConfirmationDialog, Button, Text } from '@expo/ui/swift-ui';

export default function DestructiveConfirmationDialogExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <ConfirmationDialog
        title="Delete Item?"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        titleVisibility="visible">
        <ConfirmationDialog.Trigger>
          <Button label="Delete" role="destructive" onPress={() => setIsPresented(true)} />
        </ConfirmationDialog.Trigger>
        <ConfirmationDialog.Actions>
          <Button
            label="Delete"
            role="destructive"
            onPress={() => {
              console.log('Deleted');
              setIsPresented(false);
            }}
          />
          <Button label="Cancel" role="cancel" />
        </ConfirmationDialog.Actions>
        <ConfirmationDialog.Message>
          <Text>This action cannot be undone.</Text>
        </ConfirmationDialog.Message>
      </ConfirmationDialog>
    </Host>
  );
}

With message and multiple actions

Use ConfirmationDialog.Message to display a descriptive message below the title, and include multiple action buttons for different choices.

MultiActionConfirmationDialogExample.tsx

import { useState } from 'react';
import { Host, ConfirmationDialog, Button, Text } from '@expo/ui/swift-ui';

export default function MultiActionConfirmationDialogExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <ConfirmationDialog
        title="Save Changes?"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        titleVisibility="visible">
        <ConfirmationDialog.Trigger>
          <Button label="Close Document" onPress={() => setIsPresented(true)} />
        </ConfirmationDialog.Trigger>
        <ConfirmationDialog.Actions>
          <Button label="Save" onPress={() => console.log('Saved')} />
          <Button label="Discard" role="destructive" onPress={() => console.log('Discarded')} />
          <Button label="Cancel" role="cancel" />
        </ConfirmationDialog.Actions>
        <ConfirmationDialog.Message>
          <Text>You have unsaved changes. What would you like to do?</Text>
        </ConfirmationDialog.Message>
      </ConfirmationDialog>
    </Host>
  );
}

Hidden title

Set titleVisibility="hidden" to hide the dialog title while still showing the actions and message. You should still provide a title for accessibility.

HiddenTitleConfirmationDialogExample.tsx

import { useState } from 'react';
import { Host, ConfirmationDialog, Button, Text } from '@expo/ui/swift-ui';

export default function HiddenTitleConfirmationDialogExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <ConfirmationDialog
        title="Hidden Title"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        titleVisibility="hidden">
        <ConfirmationDialog.Trigger>
          <Button label="Show Dialog" onPress={() => setIsPresented(true)} />
        </ConfirmationDialog.Trigger>
        <ConfirmationDialog.Actions>
          <Button label="OK" onPress={() => setIsPresented(false)} />
          <Button label="Cancel" role="cancel" />
        </ConfirmationDialog.Actions>
        <ConfirmationDialog.Message>
          <Text>Only the message and actions are visible.</Text>
        </ConfirmationDialog.Message>
      </ConfirmationDialog>
    </Host>
  );
}

API

import { ConfirmationDialog } from '@expo/ui/swift-ui';

Component

`ConfirmationDialog`

iOS

tvOS

Type: React.Element<ConfirmationDialogProps>

ConfirmationDialog presents a confirmation dialog with a title, optional message, and action buttons.

See: https://developer.apple.com/documentation/swiftui/view/confirmationdialog(_:ispresented:titlevisibility:actions:message:)

Props of the ConfirmationDialog component.

ConfirmationDialogProps

`children`

iOS

tvOS

Type: React.ReactNode

The contents of the confirmation dialog. Should include ConfirmationDialog.Trigger, ConfirmationDialog.Actions, and optionally ConfirmationDialog.Message.

`isPresented`

iOS

tvOS

Optional • Type: boolean

Whether the confirmation dialog is presented.

`onIsPresentedChange`

iOS

tvOS

Optional • Type: (isPresented: boolean) => void

A callback that is called when the isPresented state changes.

`title`

iOS

tvOS

Type: string

The title of the confirmation dialog.

`titleVisibility`

iOS

tvOS

Optional • Literal type: string • Default: 'automatic'

The visibility of the dialog title.

Acceptable values are: 'automatic' | 'visible' | 'hidden'

Inherited props

CommonViewModifierProps