Toast | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
Toast
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.
Show Code
Playground
Import
Copy
import { useToast } from 'native-base';
Examples
Basic
Playground
Position
Playground
Custom component
Display a custom component instead of the default Toast UI.
Playground
Closing Toasts
Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method).
Playground
Status & Variant Recipes
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.
Playground
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(...).
Playground
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.
Playground
Props
Below props can be passed while calling toast.show.
title
The title to be rendered in the Toast
Type: ReactNode
description
The description of the toast
Type: ReactNode
duration
The delay before the toast hides (in milliseconds). If set to `null`, toast will never dismiss.
Type: number
Default: 5000
id
The `id` of the toast. Mostly used when you need to prevent duplicate. By default, we generate a unique `id` for each toast
Type: any
onCloseComplete
Callback function to run side effects after the toast has closed.
Type: () => void
placement
The placement of the toast. Defaults to bottom
Type: "bottom-right" | "bottom" | "top" | "top-right" | "top-left" | "bottom-left"
Default: bottom
render
Render a component toast component. Any component passed will receive 2 props: `id` and `onClose`.
Type: (props: any) => ReactNode
_title
For providing props to Title inside Toast
Type: Partial<InterfaceTextProps>
_description
For providing props to Description inside Toast
Type: Partial<InterfaceTextProps>
accessibilityAnnouncement
The text to be announced by a screen reader when the Toast opens.
Type: string
accessibilityLiveRegion
Determines the [accessibility announcement tone](https://reactnative.dev/docs/accessibility#accessibilityliveregion-android).
Type: "none" | "polite" | "assertive"
avoidKeyboard
If true and the keyboard is opened, the Toast will move up equvivalent to the keyboard height.
Type: boolean
Default: false
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 to announce the content.
Styling
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 .
Nativebase logo
MadeWithNativeBase