ToastToasts give quick feedback or updates without interrupting the user. They’re used for non-critical messages, like success notifications, and disappear on their own. Toasts can include one action, but it shouldn’t be “Dismiss” or “Close.”

Overview

Usage Examples

Types

Type of message	Preview
Generic
Success
Validation
Offline Error

Accessories

Prop	Preview
None
With action
With loader

Timing

Toast disappears automatically after 5-10 seconds. The default duration depends on text length: [word count / 2] = X secs to disappear
Examples: [15 words / 2] = 7.5 secs [2 words / 2] = 1, but 5 secs is minimum >> 5 secs
When using Toasts in your product, keep in mind that the default display time is preset but can be adjusted for messages that need more attention or reading time. However, the duration should never be less than 5 seconds.

Spec

Positioning The Toast appears at the bottom of the screen, while keeping a spacing of S4 from the bottom of the screen, or from the bottom bar.
The Toast can be placed above CTA’s in order to keep the CTA available for the user.
Toast can be dismissed manually by swiping it down.

Tablet Spec

When displaying a Toast on a Tablet, the width of the component adjusts to the content.

• Min-width: 200px
• Max-width: 524px

UX Guidelines

Do’s & Don’ts

Message Length Do not display long messages in a Toast, keep the Toast message short and focused, yet informative.
Further information regarding the phrasing of toast messages can be found in UX Writers - Toast Guidelines.

Dev

UsageCode Example

<Toast
  visible={isVisible}
  position={'top'}
  autoDismiss={5000}
  onDismiss={onDismiss}
>

APIThis is the list of additional props for the component

action

ButtonProps

A single action for the user (showLoader will override this)

autoDismiss

number

Time of milliseconds to automatically invoke the onDismiss callback

backgroundColor

string

The toast background color

centerMessage

boolean

Should message be centered in the toast

containerStyle

ViewStyle

Toast container style

elevation

number

Custom elevationAndroid only

enableHapticFeedback

boolean

Whether to trigger an haptic feedback once the toast is shown (requires react-native-haptic-feedback dependency)

icon

ImageSourcePropType

A custom icon to render on the left side of the toast

iconColor

string

The icon color

message

string

Toast message

messageProps

TextProps

Toast message props

messageStyle

StyleProp<TextStyle>

Toast message style

onAnimationEnd

(visible?: boolean) => void

Callback for end of toast animation

onDismiss

() => void

Callback for the toast dismissal

position

'top' | 'bottom'

The position of the toast. 'top' or 'bottom'.

preset

ToastPreset ('success' | 'failure' | 'general' | 'offline')

Pass to have preset UI

renderAttachment

() => JSX.Element | undefined

Render a custom view that will appear permanently above or below a Toast, depends on the Toast's position and animate with it when the Toast is made visible or dismissed

showLoader

boolean

Whether to show a loader

style

ViewStyle

Toast style

swipeable

boolean

Whether to support dismissing the toast with a swipe gesture. Requires to pass onDismiss method to control visibility

testID

string

The component test id

visible

boolean

Whether to show or hide the toast

zIndex

number

Custom zIndex for toast