Toast | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Toast
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
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 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
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
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
Props
The following 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<ITextProps>
_description
For providing props to Description inside Toast
Type: Partial<ITextProps>
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. Check out the default theme of the toast.
Info: We can easily extend the toast component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase