Alert | NativeBase

NativeBase

3.4.x

🎉 Prompt to React Native UI

→

⌘

Introduction

Setup NativeBase Provider

Resources

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

If you are starting a new project, please try gluestack-ui for better performance and new design.

Alert

Alerts are used to communicate a state that affects a system, feature or page.

Import

NativeBase exports 5 Alert related components:

Alert: The wrapper for alert components.

Alert.Icon: The visual icon for the alert that changes based on the status prop.

Alert.Title: The title of the alert to be announced by screen readers.

Alert.Description: The description of the alert to be announced by screen readers.

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

Examples

Basic


Playground
function Example() {
  return <Alert w="100%">
      <Alert.Icon />
      <Alert.Title>Alert Title</Alert.Title>
      <Alert.Description>
        Alert Description should be a brief about the Alert Message.
      </Alert.Description>
    </Alert>;
}function Example() {
  return <Alert w="100%">
      <Alert.Icon />
      <Alert.Title>Alert Title</Alert.Title>
      <Alert.Description>
        Alert Description should be a brief about the Alert Message.
      </Alert.Description>
    </Alert>;
}

Status


Playground
function Example() {
  return <Stack space={3} w="100%">
      {["error", "warning", "info", "success"].map(key => {
      return <Alert status={key} w="100%">
            <Alert.Icon />
            <Alert.Title flexShrink={1}>{`This is an ${key} alert`}</Alert.Title>
          </Alert>;
    })}
    </Stack>;
}function Example() {
  return <Stack space={3} w="100%">
      {["error", "warning", "info", "success"].map(key => {
      return <Alert status={key} w="100%">
            <Alert.Icon />
            <Alert.Title flexShrink={1}>{`This is an ${key} alert`}</Alert.Title>
          </Alert>;
    })}
    </Stack>;
}

Variant


Playground
function Example() {
  return <Stack space={4} mx={3} w="100%">
      <Alert variant="solid" colorScheme="teal">
        <Alert.Icon />
        <Alert.Title flexShrink={1}>Alert Solid Variant</Alert.Title>
      </Alert>

      <Alert variant="left-accent" status="success">
        <Alert.Icon />
        <Alert.Title flexShrink={1}>Alert Left Accent Variant</Alert.Title>
      </Alert>

      <Alert variant="top-accent" status="error">
        <Alert.Icon />
        <Alert.Title flexShrink={1}>Alert Top Accent Variant</Alert.Title>
      </Alert>

      <Alert status="warning" variant="subtle">
        <Alert.Icon />
        <Alert.Title flexShrink={1}>Alert Default/Subtle Variant</Alert.Title>
      </Alert>

      <Alert status="info" variant="outline">
        <Alert.Icon />
        <Alert.Title flexShrink={1}>Alert Outline Variant</Alert.Title>
      </Alert>

      <Alert status="info" variant="outline-light">
        <Alert.Icon />
        <Alert.Title flexShrink={1}>Alert Outline Light Variant</Alert.Title>
      </Alert>
    </Stack>;
}function Example() {
  return <Stack space={4} mx={3} w="100%">
      <Alert variant="solid" colorScheme="teal">
        <Alert.Icon />
        <Alert.Title flexShrink={1}>Alert Solid Variant</Alert.Title>
      </Alert>

      <Alert variant="left-accent" status="success">
        <Alert.Icon />
        <Alert.Title flexShrink={1}>Alert Left Accent Variant</Alert.Title>
      </Alert>

      <Alert variant="top-accent" status="error">
        <Alert.Icon />
        <Alert.Title flexShrink={1}>Alert Top Accent Variant</Alert.Title>
      </Alert>

      <Alert status="warning" variant="subtle">
        <Alert.Icon />
        <Alert.Title flexShrink={1}>Alert Default/Subtle Variant</Alert.Title>
      </Alert>

      <Alert status="info" variant="outline">
        <Alert.Icon />
        <Alert.Title flexShrink={1}>Alert Outline Variant</Alert.Title>
      </Alert>

      <Alert status="info" variant="outline-light">
        <Alert.Icon />
        <Alert.Title flexShrink={1}>Alert Outline Light Variant</Alert.Title>
      </Alert>
    </Stack>;
}

Composition


Playground
function Example() {
  return <ScrollView>
      <VStack my={3} space={5} w="100%">
        <Alert status="success" display="flex" variant="outline" borderColor="gray.200" flexDirection="column" alignItems="center" justifyContent="center">
          <Alert.Icon boxSize="40px" mr={0} />
          <Alert.Title mt={2} mb={2}>
            This is a success alert
          </Alert.Title>
          <Alert.Description>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </Alert.Description>
        </Alert>

        <Alert status="success" display="flex" flexDirection="column" alignItems="center" justifyContent="center">
          <Alert.Icon boxSize="40px" mr={0} />
          <Alert.Title mt={2} mb={2}>
            This is a success alert
          </Alert.Title>
          <Alert.Description>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </Alert.Description>
        </Alert>

        <Alert status="success">
          <Alert.Icon />
          <Box flex={1} ml={2}>
            <Alert.Title>This is a success alert</Alert.Title>
            <Alert.Description mt={2}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </Alert.Description>
          </Box>
          <IconButton icon={<CloseIcon color="success.500" size="xs" />} position="absolute" top={0.5} right={1} />
        </Alert>
      </VStack>
    </ScrollView>;
}function Example() {
  return <ScrollView>
      <VStack my={3} space={5} w="100%">
        <Alert status="success" display="flex" variant="outline" borderColor="gray.200" flexDirection="column" alignItems="center" justifyContent="center">
          <Alert.Icon boxSize="40px" mr={0} />
          <Alert.Title mt={2} mb={2}>
            This is a success alert
          </Alert.Title>
          <Alert.Description>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </Alert.Description>
        </Alert>

        <Alert status="success" display="flex" flexDirection="column" alignItems="center" justifyContent="center">
          <Alert.Icon boxSize="40px" mr={0} />
          <Alert.Title mt={2} mb={2}>
            This is a success alert
          </Alert.Title>
          <Alert.Description>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </Alert.Description>
        </Alert>

        <Alert status="success">
          <Alert.Icon />
          <Box flex={1} ml={2}>
            <Alert.Title>This is a success alert</Alert.Title>
            <Alert.Description mt={2}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </Alert.Description>
          </Box>
          <IconButton icon={<CloseIcon color="success.500" size="xs" />} position="absolute" top={0.5} right={1} />
        </Alert>
      </VStack>
    </ScrollView>;
}

Action


Playground
function Example() {
  const [show, setShow] = React.useState(true);
  return <Box w="100%">
      <Collapse isOpen={show}>
        <Alert status="error" action={<IconButton icon={<CloseIcon size="xs" />} onPress={() => setShow(false)} />} actionProps={{
        alignSelf: "center"
      }}>
          <Alert.Icon />
          <Alert.Title>Error Alert</Alert.Title>
          <Alert.Description>description goes here</Alert.Description>
        </Alert>
      </Collapse>
      <Button size={"sm"} onPress={() => setShow(true)} my={2} mx="auto">
        Re-Open
      </Button>
    </Box>;
}function Example() {
  const [show, setShow] = React.useState(true);
  return <Box w="100%">
      <Collapse isOpen={show}>
        <Alert status="error" action={<IconButton icon={<CloseIcon size="xs" />} onPress={() => setShow(false)} />} actionProps={{
        alignSelf: "center"
      }}>
          <Alert.Icon />
          <Alert.Title>Error Alert</Alert.Title>
          <Alert.Description>description goes here</Alert.Description>
        </Alert>
      </Collapse>
      <Button size={"sm"} onPress={() => setShow(true)} my={2} mx="auto">
        Re-Open
      </Button>
    </Box>;
}