Version: 3.2.1

Toast

Toast is used to show alerts on top of an overlay. Toast will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place.

Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time.

Import#

import { useToast } from 'native-base';

Examples#

Basic#

Position#

Custom component#

Display a custom component instead of the default Toast UI.

Closing Toasts#

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

Status#

You can use status to change the color of your toasts. Toast uses the same variants as the Alert component.

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(...).

Standalone Toast#

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.

Props#

Below props can be passed while calling toast.show.

Name	Type	Description	Default
title	ReactNode	The title to be rendered in the Toast	-
description	ReactNode	The description of the toast	-
duration	number	The delay before the toast hides (in milliseconds). If set to `null`, toast will never dismiss.	5000
id	any	The `id` of the toast. Mostly used when you need to prevent duplicate. By default, we generate a unique `id` for each toast	-
isClosable	boolean	If `true`, toast will show a close button	-
onCloseComplete	() => void	Callback function to run side effects after the toast has closed.	-
placement	"top" \| "bottom" \| "top-right" \| "top-left" \| "bottom-left" \| "bottom-right"	The placement of the toast. Defaults to bottom	bottom
render	(props: any) => ReactNode	Render a component toast component. Any component passed will receive 2 props: `id` and `onClose`.	-
status	"info" \| "warning" \| "success" \| "error" \| (string & {})	The status of the toast. Adding status will render an [Alert](alert.md) component inside the `Toast`	-
variant	ResponsiveValue<"outline" \| (string & {}) \| "subtle" \| "solid" \| "left-accent" \| "top-accent" \| "outline-light">	The variants of the [Alert](alert.md) component.	-
accessibilityAnnouncement	string	The text to be announced by a screen reader when the Toast opens.	-
accessibilityLiveRegion	"none" \| "polite" \| "assertive"	Determines the [accessibility announcement tone](https://reactnative.dev/docs/accessibility#accessibilityliveregion-android).	-

Toast implements Box

Accessibility#

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 accessibilityAnnouncement to announce the content.

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of toast

We can easily extend the toast component theme using extendTheme function as shown below.

import { extendTheme, NativeBaseProvider } from "native-base";

const theme = extendTheme({
 components: {
 Toast: {
 baseStyle: {},
 defaultProps: {},
 variants: {},
 sizes: {},
 }
 } 
});

function MyApp() {
 return (
 <NativeBaseProvider theme={theme}>
 {/* Rest of the app goes here */}
 </NativeBaseProvider>
 )
}