Alert

Expo UI Alert matches the official SwiftUI alert API and presents a native iOS alert dialog with a title, actions, and an optional message.

Alert is the centered modal counterpart to ConfirmationDialog, which renders as an action sheet from the bottom of the screen. Both share the same trigger/actions/message slot model so callers can swap between them by changing the component name.

Usage

Basic alert

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

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

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

  return (
    <Host style={{ flex: 1 }}>
      <Alert
        title="Saved"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}>
        <Alert.Trigger>
          <Button
            label="Show alert"
            onPress={() => setIsPresented(true)}
          />
        </Alert.Trigger>
        <Alert.Actions>
          <Button
            label="OK"
            onPress={() => setIsPresented(false)}
          />
        </Alert.Actions>
      </Alert>
    </Host>
  );
}

Cancel and confirm

Combine role="cancel" with a confirm button to build a standard yes/no alert.

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

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

  return (
    <Host style={{ flex: 1 }}>
      <Alert
        title="Sign out?"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}>
        <Alert.Trigger>
          <Button
            label="Sign out"
            onPress={() => setIsPresented(true)}
          />
        </Alert.Trigger>
        <Alert.Actions>
          <Button
            label="Sign out"
            onPress={() => console.log('Signed out')}
          />
          <Button label="Cancel" role="cancel" />
        </Alert.Actions>
        <Alert.Message>
          <Text>
            You will need to sign in again to access your account.
          </Text>
        </Alert.Message>
      </Alert>
    </Host>
  );
}

Destructive action

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

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

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

  return (
    <Host style={{ flex: 1 }}>
      <Alert
        title="Delete account?"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}>
        <Alert.Trigger>
          <Button
            label="Delete account"
            role="destructive"
            onPress={() => setIsPresented(true)}
          />
        </Alert.Trigger>
        <Alert.Actions>
          <Button
            label="Delete"
            role="destructive"
            onPress={() => {
              console.log('Deleted');
              setIsPresented(false);
            }}
          />
          <Button label="Cancel" role="cancel" />
        </Alert.Actions>
        <Alert.Message>
          <Text>
            This permanently deletes your account and all data. This
            cannot be undone.
          </Text>
        </Alert.Message>
      </Alert>
    </Host>
  );
}

API

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

Component

`Alert`

Type: React.Element<AlertProps>

Alert presents a SwiftUI alert with a title, optional message, and action buttons.

See: Official SwiftUI documentation.

Props of the Alert component.

AlertProps

`children`

Type: React.ReactNode

The contents of the alert. Should include Alert.Trigger, Alert.Actions, and optionally Alert.Message.

`isPresented`

Optional • Type: boolean

Whether the alert is presented.

`onIsPresentedChange`

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

A callback that is called when the isPresented state changes.

`title`

Type: string

The title of the alert.

Inherited props

CommonViewModifierProps

Alert (SwiftUI) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/alert.md)