suiss/uim · React Native Component

Toast

Brief notifications that slide up from the bottom of the screen, stack, and dismiss on a timer or with a swipe.

Toast is an open-source mobile component from suiss/uim for React Native and Expo, with SwiftUI and Jetpack Compose versions built from the same design tokens. The @esuiss/uim CLI copies its source into your project, so you own the code.

iOS
Toast on iOS in light mode

Toaster wraps your app in a toast provider and renders the queue through a portal into a full-screen viewport. On iOS the viewport sits inside a FullWindowOverlay from react-native-screens, so toasts appear above native modals. Each toast is a Reanimated view that slides in from the bottom edge, fades out downward, and is capped at 384 points wide.

Visible toasts stack with a small peek and shrink behind the frontmost one. Touching the stack expands it; it collapses again three seconds after the touch ends. Each toast shows an icon for its type (success, info, warning, error, or a spinner for loading), a title, a description, an optional action button and a close button.

Installation

$ pnpm dlx @esuiss/uim@latest add toast

The CLI also adds what it builds on: Button, Icon, Text.

Manual

  1. Install the dependencies:
npx expo install cn phosphor-react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg react-native-worklets

  1. Add the pieces it builds on: Button, Icon, Text, and the primitives components/primitives/toast.tsx, components/primitives/use-render.tsx.

  2. Copy the source into components/ui/toast.tsx:

uniwind/components/ui/toast.tsx
import { cn } from "cn"
import { CheckIcon, ExclamationMarkIcon, XIcon } from "phosphor-react-native"
import * as React from "react"
import {
  ActivityIndicator,
  Platform,
  useWindowDimensions,
  View,
} from "react-native"
import {
  FadeOutDown,
  ReduceMotion,
  SlideInDown,
  useAnimatedStyle,
  withTiming,
} from "react-native-reanimated"
  1. Update the import paths to match your project.

Usage

import { ToastProvider, ToastPortal, ToastViewport, Toast, ToastContent, ToastTitle, ToastDescription, ToastAction, ToastClose, Toaster } from "@/components/ui/toast"
<Toaster>
  <Examples />
</Toaster>

Render Toaster once near the root, then call the exported toast manager from anywhere: toast.add({ title, description, type }) returns an id, toast.update(id, updates) changes a toast, and toast.close(id) removes it (or all toasts when called without an id).

toast.promise(promise, { loading, success, error }) shows a loading toast and replaces it with the success or error state when the promise settles.

Pass actionProps (for example { children: "Undo", onPress }) to show an action button. Set priority: "high" for urgent messages and timeout to override the provider default; loading toasts stay until updated.

Use createToastManager to create a separate manager and pass it to Toaster as toastManager, and useToastManager to read the current toasts and actions inside the provider. The lower-level parts are exported for building a custom toast layout.

Examples

Show on load

Shows a success toast as soon as the screen mounts.

iOS
Toast (show on load) on iOS in light mode

API Reference

ToastProvider

Holds the toast queue, default timeout and visible limit.

ExtendsToastPrimitive.ProviderProps

ToastPortal

Renders its children into a portal host.

ExtendsToastPrimitive.PortalProps

ToastViewport

Full-screen layer that holds the stack and expands it on touch.

ExtendsReact.ComponentProps<typeof ToastPrimitive.Viewport>

Toast

One animated, swipeable toast in the stack.

ExtendsReact.ComponentProps<typeof ToastPrimitive.Root>

ToastContent

Row layout for the icon, text, action and close button.

ExtendsReact.ComponentProps<typeof ToastPrimitive.Content>

ToastTitle

The toast title, read from the toast object.

ExtendsReact.ComponentProps<typeof ToastPrimitive.Title>

ToastDescription

Secondary text under the title.

ExtendsReact.ComponentProps<typeof ToastPrimitive.Description>

ToastAction

Outline button rendered from actionProps.

ExtendsReact.ComponentProps<typeof ToastPrimitive.Action>

ToastClose

Icon button that dismisses the toast.

ExtendsReact.ComponentProps<typeof ToastPrimitive.Close>

Toaster

Provider, portal and viewport that render the default toast list.

ExtendsToastPrimitive.ProviderProps
PropType
About
Name of the portal host to render into.
Type
string
Default
—

Accessibility

  • Each toast has the alert role and a live region that is polite, or assertive for priority: "high".
  • New toasts are announced with their title and description; high-priority announcements are not queued.
  • A dismiss accessibility action and the escape gesture close the toast.
  • Toasts stacked behind the front one are hidden from VoiceOver and TalkBack.
  • The close button has the label "Close toast" and the type icon is hidden from assistive technology.
  • Animations respect the system reduce motion setting.

Notes

  • Uses bg-surface-raised, text-label, text-label-secondary and tint tokens bg-green, bg-accent, bg-orange and bg-danger for the icons.
  • Light and dark colors follow the system appearance; dark mode drops the border.
  • Toasts respect the bottom safe area inset.
  • FullWindowOverlay is used on iOS only; Android renders the viewport directly.