AlertDialog | NativeBase | Universal Components for React and React Native

Search
K
Hire us
If you are starting a new project, please try gluestack-ui for better performance and new design.
AlertDialog
AlertDialog component is used to interrupt the user with a mandatory confirmation or action. AlertDialog composes  so you can use all its props.
Import
AlertDialog: Provides context and state for the dialog.
AlertDialog.Header: Contains the title announced by screen readers.
AlertDialog.Body: Contains the description announced by screen readers.
AlertDialog.Footer: Contains the actions of the dialog.
AlertDialog.Content: The wrapper for the alert dialog's content.
AlertDialog.CloseButton: The button that closes the dialog.
Copy
import { AlertDialog } from "native-base";
Examples
Basic
Playground
Transition
Playground
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the alertDialog.
Info: We can easily extend the alertDialog component theme using extendTheme function as described in the documentation .
Props
AlertDialog and its components compose the component, so all the can be passed to it. The only exception is that it requires leastDestructiveRef which is similar to initialFocusRef of Modal.
Name
Type
Description
Default
leastDestructiveRef
React.Ref
The least destructive action to get focus when dialog is open.
-
Accessibility
Keyboard Interactions
Name
Description
Space
Opens/closes the dialog.
Enter
Opens/closes the dialog.
Tab
Moves focus to the next focusable element.
Shift + Tab
Moves focus to the previous focusable element.
Esc
Closes the dialog and moves focus to AlertDialog.Trigger.
Nativebase logo
MadeWithNativeBase