Toast | NativeBase

Toast displays alerts on top of an overlay. The Toast terminates itself when the close button is clicked or after a preset timeout — the default is 5 seconds. The component also allows users to give feedback when an action is completed.

Toasts can also be configured to pop up at different areas of the application window—top or bottom. More than one instance of toast can be present onscreen at one time.


Show Code
Playground
const Example = () => {
  const toast = useToast();
  return <Button shadow={2} onPress={() => toast.show({
    description: 'Hello world'
  })}>
      Bottom
    </Button>;
};const Example = () => {
  const toast = useToast();
  return <Button shadow={2} onPress={() => toast.show({
    description: 'Hello world'
  })}>
      Bottom
    </Button>;
};

Import

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

Examples

Basic


Playground
const Example = () => {
  const toast = useToast();
  return <Center>
      <Button onPress={() => toast.show({
      description: "Hello world"
    })}>
        Show Toast
      </Button>
    </Center>;
};const Example = () => {
  const toast = useToast();
  return <Center>
      <Button onPress={() => toast.show({
      description: "Hello world"
    })}>
        Show Toast
      </Button>
    </Center>;
};

Position


Playground
const Example = () => {
  const toast = useToast();
  return <Center>
      <VStack space={2}>
        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "bottom"
      })}>
          Bottom
        </Button>

        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "top"
      })}>
          Top
        </Button>

        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "top-left"
      })}>
          Top left
        </Button>

        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "top-right"
      })}>
          Top right
        </Button>

        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "bottom-left"
      })}>
          Bottom left
        </Button>

        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "bottom-right"
      })}>
          Bottom right
        </Button>
      </VStack>
    </Center>;
};const Example = () => {
  const toast = useToast();
  return <Center>
      <VStack space={2}>
        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "bottom"
      })}>
          Bottom
        </Button>

        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "top"
      })}>
          Top
        </Button>

        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "top-left"
      })}>
          Top left
        </Button>

        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "top-right"
      })}>
          Top right
        </Button>

        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "bottom-left"
      })}>
          Bottom left
        </Button>

        <Button onPress={() => toast.show({
        title: "Hello world",
        placement: "bottom-right"
      })}>
          Bottom right
        </Button>
      </VStack>
    </Center>;
};

Custom component

Display a custom component instead of the default Toast UI.


Playground
const Example = () => {
  const toast = useToast();
  return <Center>
      <Button onPress={() => {
      toast.show({
        render: () => {
          return <Box bg="emerald.500" px="2" py="1" rounded="sm" mb={5}>
                  Hello! Have a nice day
                </Box>;
        }
      });
    }}>
        Custom Toast
      </Button>
    </Center>;
};const Example = () => {
  const toast = useToast();
  return <Center>
      <Button onPress={() => {
      toast.show({
        render: () => {
          return <Box bg="emerald.500" px="2" py="1" rounded="sm" mb={5}>
                  Hello! Have a nice day
                </Box>;
        }
      });
    }}>
        Custom Toast
      </Button>
    </Center>;
};

Closing Toasts

Toasts can be closed imperatively, individually (via the close instance method), or all together (via the closeAll instance method).


Playground
const Example = () => {
  const toast = useToast();
  const toastIdRef = React.useRef();

  function close() {
    if (toastIdRef.current) {
      toast.close(toastIdRef.current);
    }
  }

  function closeAll() {
    toast.closeAll();
  }

  function addToast() {
    toastIdRef.current = toast.show({
      title: "Hi, Nice to see you"
    });
  }

  return <Stack direction={{
    base: "column",
    md: "row"
  }} space={2}>
      <Button onPress={addToast}>Toast</Button>
      <Button onPress={close} variant="outline">
        Close last toast
      </Button>
      <Button onPress={closeAll} variant="outline">
        Close all toasts
      </Button>
    </Stack>;
};const Example = () => {
  const toast = useToast();
  const toastIdRef = React.useRef();

  function close() {
    if (toastIdRef.current) {
      toast.close(toastIdRef.current);
    }
  }

  function closeAll() {
    toast.closeAll();
  }

  function addToast() {
    toastIdRef.current = toast.show({
      title: "Hi, Nice to see you"
    });
  }

  return <Stack direction={{
    base: "column",
    md: "row"
  }} space={2}>
      <Button onPress={addToast}>Toast</Button>
      <Button onPress={close} variant="outline">
        Close last toast
      </Button>
      <Button onPress={closeAll} variant="outline">
        Close all toasts
      </Button>
    </Stack>;
};

Status & Variant Recipes

You can create custom Toasts that respond to different statuses and variants, similar to the Alert component. Below is a recipe that you can try out.


Playground
const Example = () => {
  const toast = useToast();
  const ToastDetails = [{
    title: "Account verified",
    variant: "solid",
    description: "Thanks for signing up with us.",
    isClosable: true
  }, {
    title: "Something went wrong",
    variant: "subtle",
    description: "Please create a support ticket from the support page"
  }, {
    title: "Network connection restored",
    variant: "left-accent",
    description: "This is to inform you that your network connectivity is restored",
    isClosable: true
  }, {
    title: "Invalid email address",
    variant: "top-accent",
    description: "Please enter a valid email address"
  }, {
    title: "Invalid email address",
    variant: "outline",
    description: "Please enter a valid email address"
  }];

  const ToastAlert = ({
    id,
    status,
    variant,
    title,
    description,
    isClosable,
    ...rest
  }) => <Alert maxWidth="100%" alignSelf="center" flexDirection="row" status={status ? status : "info"} variant={variant} {...rest}>
      <VStack space={1} flexShrink={1} w="100%">
        <HStack flexShrink={1} alignItems="center" justifyContent="space-between">
          <HStack space={2} flexShrink={1} alignItems="center">
            <Alert.Icon />
            <Text fontSize="md" fontWeight="medium" flexShrink={1} color={variant === "solid" ? "lightText" : variant !== "outline" ? "darkText" : null}>
              {title}
            </Text>
          </HStack>
          {isClosable ? <IconButton variant="unstyled" icon={<CloseIcon size="3" />} _icon={{
          color: variant === "solid" ? "lightText" : "darkText"
        }} onPress={() => toast.close(id)} /> : null}
        </HStack>
        <Text px="6" color={variant === "solid" ? "lightText" : variant !== "outline" ? "darkText" : null}>
          {description}
        </Text>
      </VStack>
    </Alert>;

  return <Center>
      <VStack space={2}>
        {ToastDetails.map((item, index) => <Button key={index} onPress={() => toast.show({
        render: ({
          id
        }) => {
          return <ToastAlert id={id} {...item} />;
        }
      })}>
            {item.variant}
          </Button>)}
      </VStack>
    </Center>;
};const Example = () => {
  const toast = useToast();
  const ToastDetails = [{
    title: "Account verified",
    variant: "solid",
    description: "Thanks for signing up with us.",
    isClosable: true
  }, {
    title: "Something went wrong",
    variant: "subtle",
    description: "Please create a support ticket from the support page"
  }, {
    title: "Network connection restored",
    variant: "left-accent",
    description: "This is to inform you that your network connectivity is restored",
    isClosable: true
  }, {
    title: "Invalid email address",
    variant: "top-accent",
    description: "Please enter a valid email address"
  }, {
    title: "Invalid email address",
    variant: "outline",
    description: "Please enter a valid email address"
  }];

  const ToastAlert = ({
    id,
    status,
    variant,
    title,
    description,
    isClosable,
    ...rest
  }) => <Alert maxWidth="100%" alignSelf="center" flexDirection="row" status={status ? status : "info"} variant={variant} {...rest}>
      <VStack space={1} flexShrink={1} w="100%">
        <HStack flexShrink={1} alignItems="center" justifyContent="space-between">
          <HStack space={2} flexShrink={1} alignItems="center">
            <Alert.Icon />
            <Text fontSize="md" fontWeight="medium" flexShrink={1} color={variant === "solid" ? "lightText" : variant !== "outline" ? "darkText" : null}>
              {title}
            </Text>
          </HStack>
          {isClosable ? <IconButton variant="unstyled" icon={<CloseIcon size="3" />} _icon={{
          color: variant === "solid" ? "lightText" : "darkText"
        }} onPress={() => toast.close(id)} /> : null}
        </HStack>
        <Text px="6" color={variant === "solid" ? "lightText" : variant !== "outline" ? "darkText" : null}>
          {description}
        </Text>
      </VStack>
    </Alert>;

  return <Center>
      <VStack space={2}>
        {ToastDetails.map((item, index) => <Button key={index} onPress={() => toast.show({
        render: ({
          id
        }) => {
          return <ToastAlert id={id} {...item} />;
        }
      })}>
            {item.variant}
          </Button>)}
      </VStack>
    </Center>;
};

Preventing Duplicate Toast

In some cases, you might need to prevent duplicates of specific toasts. To achieve this, you need to pass an id and use the toast.isActive method to determine when to call toast.show(...).


Playground
function Example() {
  const toast = useToast();
  const id = "test-toast";
  return <Center>
      <Button onPress={() => {
      if (!toast.isActive(id)) {
        toast.show({
          id,
          title: "Hey! You can't create a duplicate toast"
        });
      }
    }}>
        Click me!
      </Button>
    </Center>;
}function Example() {
  const toast = useToast();
  const id = "test-toast";
  return <Center>
      <Button onPress={() => {
      if (!toast.isActive(id)) {
        toast.show({
          id,
          title: "Hey! You can't create a duplicate toast"
        });
      }
    }}>
        Click me!
      </Button>
    </Center>;
}

Standalone Toast

You can use standalone toast where you don't have access to useToast hook, for example, in a different file, out of a React component.


Playground
const Example = () => {
  return <Center>
      <Button onPress={() => Toast.show({
      title: "Hello world"
    })}>
        Show Toast
      </Button>
    </Center>;
};const Example = () => {
  return <Center>
      <Button onPress={() => Toast.show({
      title: "Hello world"
    })}>
        Show Toast
      </Button>
    </Center>;
};