Open source for Expo and React Native

Toasts in real Liquid Glass.

The react-hot-toast API, rebuilt for native apps. Liquid Glass on iOS 26, Material 3 on Android, frosted glass on the web.

Quick start

Live in your browser. See it on iPhone ↓

More than a line of text.

Uploads, steps, Undo, notifications, a HUD and the Dynamic Island. Each is one call, and every tile below is the real library.

Rich toasts guide

toast.progress()

Progress that never re-renders

set() writes to the UI thread, so the bar fills smoothly however often you call it. Then the same toast becomes the outcome.

toast.steps()

Named steps

Each stage gets its label and a segment of the bar.

toast.notify()

Notifications

A title, a body, an avatar and a time. Tap to open.

action.countdown

Undo, with a countdown

A ring drains around the button over the time left.

Open the details

expandable

Details on demand

Open it and the timers wait while you read.

toast.hud()

HUD

Centred, with a large icon.

toast.island()

Island

Grows out of the Dynamic Island.

toast.banner()

Banner

Edge to edge, for lasting states.

preset: 'auto'

Material on Android

Android gets a Material 3 snackbar by default.

Go on, make a toast.

Each button fires a real toast over this page. Swipe one away, or press and hold to pause.

Success

toast.success('Changes saved');

Put it anywhere.

Six positions. Pick one and this page's toasts move.

Make it yours.

Every colour, size and duration is a token. Change them here, watch the toasts on this page follow, and copy the Toaster you built.

On iPhone, it's real Liquid Glass.

A browser can only blur. On iOS 26 the same calls draw Apple's own material. These are screen recordings of the example app, not mockups. Pick a call to jump to it.

iOS 26 · Liquid Glass

Android · opaque surface

App.tsx

toast.success('Changes saved')

Lands with a pop, and the check draws itself.

Built for a phone, not ported to one.

Gestures, a queue and accessibility, built in. Every tile is live: try them.

visibleToasts: 3

A queue, not a pile

Fire five at once. Three show and two wait their turn, in order, each with its full time. Errors go first.

Drag it sideways, or press and hold

swipe · press and hold

Swipe it away, hold to read

Fling a toast to dismiss it. Press and hold to pause every timer in the stack.

0 calls · 0 toasts

dedupeKey: 'draft'

Twenty calls, one toast

Repeat a call with the same key while its toast is showing, and you get that toast back.

iconPop · iconPopDelay

The check draws itself

Icons pop in and the checkmark draws on react-hot-toast’s timing. Under Reduce Motion they arrive finished.

VoiceOver · TalkBack

Accessible by default

Announced to screen readers, message and description together, and every system setting followed.

theme={{ radius }}

Tokens, not overrides

Every colour, size and duration is a token, light and dark, exported as CSS variables for NativeWind or Unistyles. Drag it:

radius 22paddingVertical 14<Toaster theme={{ radius: 22 }} />

Know react-hot-toast? Change one import.

react-hot-toast renders to the DOM, so it cannot run in a native app. This is its API rebuilt on native views, so the toast code you have ports as it is.

screens/Checkout.tsx

import toast from 'react-hot-toast';
import toast from 'expo-hot-toast';

export function Checkout({ cart }) {
  const placeOrder = () =>
    toast.promise(saveOrder(cart), {
      loading: 'Placing order…',
      success: 'Order placed',
      error: 'Could not place the order',
    });

  return <Button title="Order" onPress={placeOrder} />;
}

The same: toast() and each of its methods, <Toaster> with position, toastOptions and reverseOrder, <ToastBar>, iconTheme, removeDelay and resolveValue.

What a native app spells differently
react-hot-toast	expo-hot-toast
`className`	`style`, `textStyle` and `theme`
`ariaProps`	`accessibilityLabel` and `important`
Up to 20 on screen	3 per position, the rest queue
`gutter`, `toastLimit`	`gap`, `visibleToasts`The old names still work.
`useToaster(opts, id)`	`useToaster({ toastOptions, toasterId })`
`calculateOffset`, `updateHeight`	Not needed: layout places toasts

Only here: Undo and other actions, rich toasts, swipe to dismiss, toast.update, dedupeKey, a queue, and Liquid Glass on iOS 26.

Every difference, on one page

Questions

Something else? Ask on GitHub.

Ship your first toast.

Four steps by hand, or one prompt for your coding agent. Either way it takes a few minutes.

By hand With an AI agent

A React web app without React Native? Import expo-hot-toast/web, which needs none of the peers. Web apps

Install the package

It is not on npm yet, so it installs from GitHub and builds after cloning.

npmpnpmyarnbun

npm install github:VanitasCaesar1/expo-hot-toast

pnpm add github:VanitasCaesar1/expo-hot-toast

yarn add github:VanitasCaesar1/expo-hot-toast

bun add github:VanitasCaesar1/expo-hot-toast

Add its peers

With npx expo install, so each version matches your Expo SDK.

Terminal

npx expo install expo-glass-effect expo-haptics \
  react-native-reanimated react-native-worklets \
  react-native-gesture-handler react-native-safe-area-context \
  react-native-svg

Mount the Toaster

Once, after the rest of the app, inside a GestureHandlerRootView. Expo Router already gives you the safe-area provider it reads.

app/_layout.tsx

import { Stack } from 'expo-router';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { Toaster } from 'expo-hot-toast';

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Stack />
      <Toaster />
    </GestureHandlerRootView>
  );
}

Toast

From any screen. Run it to see this one.

Any screen

import { toast } from 'expo-hot-toast';

toast.success('Changes saved');

Paste it into Claude Code, Cursor or Codex. It reads the docs as plain text, installs the package and its peers, wires the app root and swaps your existing toasts, then shows you the diff.

Add expo-hot-toast to this app

Add expo-hot-toast to this Expo / React Native app.

1. Read https://vanitascaesar1.github.io/expo-hot-toast/llms-full.txt for the full API.
2. Install it: npm install github:VanitasCaesar1/expo-hot-toast
3. Install the peer dependencies with npx expo install: expo-glass-effect expo-haptics react-native-reanimated react-native-worklets react-native-gesture-handler react-native-safe-area-context react-native-svg
4. Make sure the app root is wrapped in GestureHandlerRootView and SafeAreaProvider (Expo Router already provides SafeAreaProvider), and render <Toaster /> once, after the rest of the app.
5. Replace the app's existing toasts, alerts used as notifications, or snackbars with toast(), toast.success(), toast.error() and toast.promise(). Use action: { label: 'Undo', onPress } where an Undo makes sense.
6. Do not add a Babel plugin if the project uses babel-preset-expo; it adds the Worklets plugin itself.

Show me the diff before changing behaviour beyond swapping toasts.

Show the whole promptShow less

Docs as plain text, for any tool: llms.txt and llms-full.txt. Source on GitHub.

Like it? Give it a star.

It's free and MIT licensed. A star helps other Expo developers find it.

Star on GitHub

Report an issue