Toast | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
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
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
You can use status to change the color of your toasts. Toast uses the same variants as the component.
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
isClosable
If `true`, toast will show a close button
Type: boolean
onCloseComplete
Callback function to run side effects after the toast has closed.
Type: () => void
placement
The placement of the toast. Defaults to bottom
Type: "top" | "top-right" | "top-left" | "bottom" | "bottom-left" | "bottom-right"
Default: bottom
render
Render a component toast component. Any component passed will receive 2 props: `id` and `onClose`.
Type: (props: any) => ReactNode
status
The status of the toast. Adding status will render an [Alert](alert.md) component inside the `Toast`
Type: "info" | "warning" | "error" | "success"
variant
The variants of the [Alert](alert.md) component.
Type: "subtle" | "solid" | "left-accent" | "top-accent" | "outline" | "outline-light"
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"
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