Toast | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
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.
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