Toast

The Toast component displays brief, auto-dismissing messages that appear as overlays. Toasts are ideal for showing feedback about an operation, notifications, or status updates without interrupting the user's workflow.

It provides:

• Brief, non-intrusive notifications
• Auto-dismiss with configurable duration
• Customizable position (top/bottom)
• Status colors for different message types
• Theme support (light/dark/auto)
• Optional description text

Usage Playground

Show Component

Message

Description

Offset

Duration

Position

top

bottom

Theme

light

dark

auto

Code Snippet

import { Toast } from "@react-native-blossom-ui/overlays";

    function Usage() {
        return (
            <Toast/>
        );
    }

Usage

The basic usage shows a toast with a message and optional description. The toast automatically dismisses after a default duration and can be positioned at the top or bottom of the screen.

Show Toast

function ToastUsage() {
  return (
    <Button
      onPress={() => {
        Toast.show({
          message: 'This is a toast message!',
          description: 'This is a description for the toast message.',
        })
      }}>
      Show Toast
    </Button>
  )
}

Duration

Control how long the toast stays visible using the duration prop. Set shorter durations for simple messages or longer durations for important information that users need more time to read.

Short Lived Toast

Long Lived Toast

function ToastDuration() {
  return (
    <View>
      <Button
        onPress={() => {
          Toast.show({
            message: 'This is a toast message!',
            description: 'This is a description for the toast message.',
            duration: 500,
          })
        }}>
        Short Lived Toast
      </Button>
      <Button
        onPress={() => {
          Toast.show({
            message: 'This is a toast message!',
            description: 'This is a description for the toast message.',
            duration: 5000,
          })
        }}>
        Long Lived Toast
      </Button>
    </View>
  )
}

Position

Display toasts at the top or bottom of the screen. Choose the position that best fits your app's layout and doesn't obstruct important UI elements.

Show Top Toast

Show Bottom Toast

function ToastPosition() {
  return (
    <View>
      <Button
        onPress={() => {
          Toast.show({
            message: 'This is a toast message!',
            description: 'This is a description for the toast message.',
            position: 'top',
          })
        }}>
        Show Top Toast
      </Button>

      <Button
        onPress={() => {
          Toast.show({
            message: 'This is a toast message!',
            description: 'This is a description for the toast message.',
            position: 'bottom',
          })
        }}>
        Show Bottom Toast
      </Button>
    </View>
  )
}

Status

Use status colors to indicate the type of message: default, info, success, warning, or error. Each status has an associated color that helps users quickly understand the nature of the notification.

default

info

success

warning

error

Show Bottom Toast

function ToastStatuses() {
  const [status, setStatus] = useState<ToastStatus>('default')

  return (
    <View>
      <SegmentedButton
        data={[
          {title: 'default'},
          {title: 'info'},
          {title: 'success'},
          {title: 'warning'},
          {title: 'error'},
        ]}
        onPress={(value) => {
          setStatus(value as ToastStatus)
        }}
      />

      <Button
        onPress={() => {
          Toast.show({
            message: 'This is a toast message!',
            description: 'This is a description for the toast message.',
            status,
            position: 'bottom',
          })
        }}>
        Show Bottom Toast
      </Button>
    </View>
  )
}

Themes

Choose between light, dark, or auto themes. The auto theme automatically adapts to the current app theme for consistent appearance.

auto

light

dark

Show Toast

function ToastThemes() {
  const [theme, setTheme] = useState<ToastTheme>('auto')

  return (
    <View>
      <SegmentedButton
        data={[{title: 'auto'}, {title: 'light'}, {title: 'dark'}]}
        onPress={(value) => {
          setTheme(value as ToastTheme)
        }}
      />

      <Button
        onPress={() => {
          Toast.show({
            message: 'This is a Toast message!',
            description: 'This is a description for the toast message.',
            theme,
          })
        }}>
        Show Toast
      </Button>
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	--	--	--
message	string	--	The main message to be displayed in the toast.
description	string	--	An optional description providing additional details about the toast message.
status	ToastStatus	default	The status of the toast, which can be used to indicate the type of message.
offset	number	--	The offset from the top or bottom of the screen where the toast should appear.
duration	number	--	The duration for which the toast should be visible, in milliseconds.
position	"top" | "bottom"	bottom	The position of the toast on the screen.
theme	ToastTheme	auto	The theme of the toast, which can be 'light', 'dark', or 'auto' to match the system theme.
onShow	() => void	--	Callback function that is called when the toast is shown.
onHide	() => void	--	Callback function that is called when the toast is hidden.