Home / Guides

How to show toast notifications in React Native

By the LumioUI team · Updated

To show toast notifications in React Native, put a toast provider at the root of your app and call a hook from anywhere to show one. Name the variant: success, error, info, warning or loading. Toasts should stack, dismiss themselves after a few seconds, and swipe away. The LumioUI Toast does this, and a loading toast can turn into a success in place.

Live demo of the LumioUI Toast component. It's interactive, so try it.

What a good toast system needs

  1. One provider, one hook. The provider renders the stack above everything else and owns the timers. Screens call useToast() and never render toasts themselves.
  2. Entrance and exit. Toasts grow out of the screen edge they live on and leave by dimming in place. The exit should run about 60% as long as the entrance.
  3. Stacking. Newer toasts push older ones back, and only a few stay visible. The rest wait their turn, and their timers keep running.
  4. Swipe to dismiss. A horizontal flick (around 500 points per second) removes one. A slow drag springs it back.
  5. Accessibility. Announce the toast's text to screen readers once, not every animation frame. Never put the only way to do something inside a toast that disappears.

The quick way: LumioUI Toast

Wrap your app once:

TSX _layout.tsx 
// app/_layout.tsx (Expo Router) or App.tsx
import { ToastProvider } from "@/components/ui/toast/toast";

export default function RootLayout() {
  return (
    <ToastProvider position="top" defaultDuration={4000}>
      {/* your app */}
    </ToastProvider>
  );
}

Then show toasts from any screen. Here a loading toast covers a save:

TSX SaveButton.tsx 
import { useToast } from "@/components/ui/toast/toast";
import { Button } from "@/components/ui/button/button";

export function SaveButton() {
  const toast = useToast();

  const save = async () => {
    // One toast: loading while it saves, then it turns into the result in place.
    const id = toast.loading("Saving…");
    try {
      await api.save();
      toast.update(id, { title: "Saved", description: "Your changes are live.", variant: "success", duration: 4000 });
    } catch {
      toast.update(id, { title: "Couldn't save", description: "Check your connection and try again.", variant: "error", duration: 6000 });
    }
  };

  return <Button onPress={save}>Save</Button>;
}
  • toast.show(title, options) takes description, variant, icon, duration (0 keeps it open), dismissible and an action button.
  • toast.success, error, warning, info and loading are shortcuts. toast.update(id, …) changes a toast in place, and dismiss(id) or dismissAll() close them.
  • The provider sets position ("top" or "bottom"), limit, maxVisible and the surface ("solid" or "glass").

For a message that should stay on the page, like a form error, use Alert. For an app-wide banner that drops from the top, see Notification Banner (Pro).

Add it to your app

LumioUI's CLI copies the component's source into your project, so it's yours to read and change. Run init once per project:

npx @lumioui/cli init
npx @lumioui/cli add toast

It works in Expo (SDK 54+) and bare React Native, with Reanimated 4 and NativeWind. See the installation guide and the full Toast API.

More React Native guides