AlertDialog | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
AlertDialog
AlertDialog is used when a user needs to be interrupted with a mandatory confirmation or call-to-action. AlertDialog composes  so you can use all its props.
Show Code
Playground
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
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