Toast

Free · MITReact Native · Expo

Background confirmations that stack at the top, fan out on tap, swipe away up or sideways, and pause their timers while touched.

View as Markdown

Look

Try it on your phone

Scan to open this demo in your phone's browser and use it with your fingers.

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/toast.json

Then run npx expo install --fix so react-native-gesture-handler, react-native-reanimated match your Expo SDK. Files land in components/goodui-native/toast.

Wrap the app in GestureHandlerRootView and ThemeProvider.
Render <Toaster /> once inside ThemeProvider.

Usage

// Once, near the root (inside ThemeProvider):
import { Toaster } from "@/components/goodui-native/toast/toast";
<Toaster />

// Anywhere:
import { toast } from "@/components/goodui-native/toast/toast";
toast.success("Backup complete", { description: "2,481 photos are safe in the cloud." });
toast("Message archived", { action: { label: "Undo", onPress: restore } });
toast.error("Couldn't sync", { description: "We'll retry when you reconnect." });

When to use

Use it for

Confirming work that happened in the background: a backup finished, a message was archived.
Offering Undo after a reversible action.
Errors from background work, such as a failed sync.

Reach for something else

As the only confirmation of an action the person just took on screen: let the control confirm in place (button does).
Messages that need a decision: use a sheet or a dialog.

API reference

Toaster

toast

Prop	Type	Default
description Second line under the title. Up to three lines show.	string	—
duration Milliseconds before it leaves on its own. `Infinity` keeps it until dismissed. Default 4000.	number	—
action One short action, such as Undo. Pressing it also dismisses the toast. Its cue is `tap` unless `haptic` names another (`undo` for Undo).	{ label: string; onPress: () => void; haptic?: HapticName \| false }	—
icon Replaces the default icon (a check for success, an alert for errors).	ReactNode	—

Motion and haptics

New toasts drop in from the top on the smooth spring; older ones scale down and peek out below.
Tapping the stack fans it out; it collapses again when one toast is left.
Swipes follow the finger: up and sideways dismiss with velocity, down resists.
Reduced motion: toasts fade in and out without travel.

Haptic: notify when a toast appears, error for an error toast
Haptic: tap when an action is pressed (action.haptic names another cue, such as undo)

A module-level store with useSyncExternalStore; only the Toaster re-renders.

Every toast is announced when it appears; the viewport is a polite live region on Android.
Each toast is an alert with its title and description as the label; the action is a separate button.

Notes for AI

Render <Toaster /> exactly once, inside ThemeProvider. Call toast() from anywhere, including outside React.
Keep titles short; put detail in description. At most one action.
Use duration: Infinity for toasts that must stay until dismissed.

Button

A press-responsive button with haptics that runs async actions on its own: it gathers into a spinner, then opens into a success or error state.

Swipe actions

Row actions that unfold with the finger; a long swipe lets the edge action take over and run, and destructive actions collapse the row before it leaves.