ConfirmationDialog

A SwiftUI ConfirmationDialog component for presenting confirmation prompts.

iOS

tvOS

Included in Expo Go

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

No API data file found, sorry!