Version: 3.0.0


AlertDialog component is used to interrupt the user with a mandatory confirmation or action. AlertDialog composes Modal so you can use all its props.


  • 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';





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 */}
Read more about extending component theme here.


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.

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