AlertDialog | NativeBase | Universal Components for React and React Native

NativeBase

3.3.x

Announcing NativeBase Startup+ bundle 🎉

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Typography

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

Components Migration

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.

Copy
import { AlertDialog } from 'native-base';

Examples

Basic


Playground
function AlertDialogComponent() {
  const [isOpen, setIsOpen] = React.useState(false);

  const onClose = () => setIsOpen(false);

  const cancelRef = React.useRef();
  return <Center>
      <AlertDialog leastDestructiveRef={cancelRef} isOpen={isOpen} onClose={onClose} motionPreset={"fade"}>
        <AlertDialog.Content>
          <AlertDialog.Header fontSize="lg" fontWeight="bold">
            Delete Customer
          </AlertDialog.Header>
          <AlertDialog.Body>
            Are you sure? You can't undo this action afterwards.
          </AlertDialog.Body>
          <AlertDialog.Footer>
            <Button ref={cancelRef} onPress={onClose}>
              Cancel
            </Button>
            <Button colorScheme="red" onPress={onClose} ml={3}>
              Delete
            </Button>
          </AlertDialog.Footer>
        </AlertDialog.Content>
      </AlertDialog>
      <Button colorScheme="danger" onPress={() => setIsOpen(!isOpen)}>
        Delete Customer
      </Button>
    </Center>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <AlertDialogComponent />
      </Center>
    </NativeBaseProvider>;
}function AlertDialogComponent() {
  const [isOpen, setIsOpen] = React.useState(false);

  const onClose = () => setIsOpen(false);

  const cancelRef = React.useRef();
  return <Center>
      <AlertDialog leastDestructiveRef={cancelRef} isOpen={isOpen} onClose={onClose} motionPreset={"fade"}>
        <AlertDialog.Content>
          <AlertDialog.Header fontSize="lg" fontWeight="bold">
            Delete Customer
          </AlertDialog.Header>
          <AlertDialog.Body>
            Are you sure? You can't undo this action afterwards.
          </AlertDialog.Body>
          <AlertDialog.Footer>
            <Button ref={cancelRef} onPress={onClose}>
              Cancel
            </Button>
            <Button colorScheme="red" onPress={onClose} ml={3}>
              Delete
            </Button>
          </AlertDialog.Footer>
        </AlertDialog.Content>
      </AlertDialog>
      <Button colorScheme="danger" onPress={() => setIsOpen(!isOpen)}>
        Delete Customer
      </Button>
    </Center>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <AlertDialogComponent />
      </Center>
    </NativeBaseProvider>;
}

Transition


Playground
function AlertDialogComponent() {
  const [isOpen, setIsOpen] = React.useState(false);

  const onClose = () => setIsOpen(false);

  const cancelRef = React.useRef();
  return <Center>
      <AlertDialog motionPreset="fade" leastDestructiveRef={cancelRef} onClose={onClose} isOpen={isOpen} isCentered>
        <AlertDialog.Content>
          <AlertDialog.CloseButton />
          <AlertDialog.Header>Discard Changes?</AlertDialog.Header>
          <AlertDialog.Body>
            Are you sure you want to discard all of your notes? 44 words will be
            deleted.
          </AlertDialog.Body>
          <AlertDialog.Footer>
            <Button ref={cancelRef} onPress={onClose}>
              No
            </Button>
            <Button colorScheme="red" ml={3}>
              Yes
            </Button>
          </AlertDialog.Footer>
        </AlertDialog.Content>
      </AlertDialog>
      <Button onPress={() => setIsOpen(!isOpen)}>Discard</Button>
    </Center>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <AlertDialogComponent />
      </Center>
    </NativeBaseProvider>;
}function AlertDialogComponent() {
  const [isOpen, setIsOpen] = React.useState(false);

  const onClose = () => setIsOpen(false);

  const cancelRef = React.useRef();
  return <Center>
      <AlertDialog motionPreset="fade" leastDestructiveRef={cancelRef} onClose={onClose} isOpen={isOpen} isCentered>
        <AlertDialog.Content>
          <AlertDialog.CloseButton />
          <AlertDialog.Header>Discard Changes?</AlertDialog.Header>
          <AlertDialog.Body>
            Are you sure you want to discard all of your notes? 44 words will be
            deleted.
          </AlertDialog.Body>
          <AlertDialog.Footer>
            <Button ref={cancelRef} onPress={onClose}>
              No
            </Button>
            <Button colorScheme="red" ml={3}>
              Yes
            </Button>
          </AlertDialog.Footer>
        </AlertDialog.Content>
      </AlertDialog>
      <Button onPress={() => setIsOpen(!isOpen)}>Discard</Button>
    </Center>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <AlertDialogComponent />
      </Center>
    </NativeBaseProvider>;
}