Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Installation

pnpm dlx bna-ui add alert-dialog

Usage

The useAlertDialog hook is the recommended way to control the dialog's visibility state.

import { View } from 'react-native';
import { Button } from '@/components/ui/button';
import { AlertDialog, useAlertDialog } from '@/components/ui/alert-dialog';
 
export default function MyComponent() {
  const { isVisible, open, close } = useAlertDialog();
 
  const handleConfirm = () => {
    // Handle the confirmation logic
    console.log('Action confirmed!');
  };
 
  return (
    <View>
      <Button onPress={open}>Show Dialog</Button>
 
      <AlertDialog
        isVisible={isVisible}
        onClose={close}
        title='Are you absolutely sure?'
        description='This action cannot be undone. This will permanently delete your account and remove your data from our servers.'
        onConfirm={handleConfirm}
      />
    </View>
  );
}

Examples

Default

Destructive Action

Custom Style

API Reference

AlertDialog

The main component that renders the modal dialog.

PropTypeDefaultDescription
isVisibleboolean-Required. Controls the visibility of the dialog.
onClose() => void-Required. Callback function when the dialog is closed.
titlestring-The title displayed at the top of the dialog.
descriptionstring-The main content or description of the dialog.
childrenReact.ReactNode-Custom React nodes to render inside the dialog's content area.
confirmTextstring'OK'The text for the confirmation button.
cancelTextstring'Cancel'The text for the cancellation button.
onConfirm() => void-Callback function when the confirmation button is pressed.
onCancel() => void-Callback function when the cancel button is pressed or backdrop is tapped.
dismissiblebooleantrueIf true, tapping the backdrop will close the dialog.
showCancelButtonbooleantrueIf false, the cancel button will not be rendered.
styleViewStyle-Custom styles to apply to the dialog's main container.

useAlertDialog

A hook to manage the state of the AlertDialog component.

ReturnTypeDescription
isVisiblebooleanThe current visibility state of the dialog.
open() => voidA function to set the dialog's visibility to true.
close() => voidA function to set the dialog's visibility to false.
toggle() => voidA function to toggle the dialog's visibility.

Accessibility

The Alert Dialog component is designed with accessibility in mind to ensure a clear and interruptive user experience.

  • The modal nature of the component and the dark backdrop ensure that the user's attention is focused on the dialog content.
  • It uses standard, accessible components like Button and Text from the library.
  • The dialog can be dismissed by tapping the backdrop (if dismissible is true), providing an intuitive closing mechanism.