Version: 3.2.0

AlertDialog

AlertDialog component is used to interrupt the user with a mandatory confirmation or action. AlertDialog composes Modal 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.
import { AlertDialog } from 'native-base';

Examples#

Basic#

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of alertDialog
We can easily extend the alertDialog component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
AlertDialog: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.

Props#

AlertDialog and its components compose the Modal component, so all the Modal props can be passed to it. The only exception is that it requires leastDestructiveRef which is similar to initialFocusRef of Modal.

NameTypeDescriptionDefault
leastDestructiveRefReact.RefThe least destructive action to get focus when dialog is open.-

Accessibility#

Adheres to the Alert and Message Dialogs WAI-ARIA design pattern.

Keyboard Interactions#

NameDescription
SpaceOpens/closes the dialog.
EnterOpens/closes the dialog.
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
EscCloses the dialog and moves focus to AlertDialog.Trigger.