Toast display 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.
const Example = () => {
const toast = useToast();
return <Button shadow={2} onPress={() => toast.show({
description: 'Hello world'
})}>
Bottom
</Button>;
};
import { useToast } from 'native-base';
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>
<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>;
};
Display a custom component instead of the default Toast UI.
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>;
};
Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method).
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>;
};
You create custom Toasts that responds to different status and variants, similarly like the Alert component. Below is a recipe that you can try out.
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 ?? "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 => <Button 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 duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...).
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>;
}
You can use standalone toast where you don't have access to useToast hook. e.g. in a different file, out of a React component.
const Example = () => {
return <Center>
<Button onPress={() => Toast.show({
title: "Hello world"
})}>
Show Toast
</Button>
</Center>;
};
Below props can be passed while calling toast.show.
Toast implements
,
,
,
,
,
,
,
,
,
On Android and Web, Toast renders under a View with accessibilityLiveRegion which announces the content rendered inside it to screen reader devices.
On iOS, accessibilityLiveRegion is not supported yet, so we use the
to announce the content.
NativeBase ships with a default theme for each component. Checkout the default theme of toast
.
Info:
We can easily extend the toast component theme using extendTheme function as described in the documentation .
