Skip to main content
Logo Appt Light

Accessibility dialog on React Native

A dialog overlays the screen and offers one or more actions to proceed. Dialogs should always include a close button to make them accessible for users of assistive technologies. Furthermore, the focus of assistive technologies should be trapped inside the dialog while it's visible.

In React Native, you can use Alert to show a dialog. On Android you can add a neutral, negative and positive button, this is based on the amount of buttons that are set. On iOS it's possible to set the AlertButtonStyle for each button. You should always include a button to close the dialog. The focus of assistive technologies is automatically trapped inside the dialog while it's visible.

Alert.alert(
  "Confirm Appt membership?",
  "Your bank account will be billed.",
  [
    {
      text: "Cancel",
      onPress: () => {
        // Cancel
      },
      style: "cancel"
    },
    {
      text: "Proceed",
      onPress: () => {
        // Proceed
      },
    },
  ],
  {
      cancelable: true,
      onDismiss: () => console.log("Dismissed alert"),
  }
);

Feedback?

Let us know!