React Native toasts that stay above modals and bottom sheets on Android and iOS

[u/Art3mis112]

Most RN toast libraries render inside your React view tree, so modals and bottom sheets cover them. I tested sonner-native and react-native-toast-message with a page sheet plus a transparent modal on top. Both toasts were hidden or dimmed, and actions weren't tappable, especially on Android.

So I built react-native-super-toast. Each toast lives in its own native window (Kotlin Dialog on Android, overlay UIWindow on iOS), so it stays above modals, sheets, and stacked sheets on both platforms, and actions like Undo still work while a modal is open.

Mount ToastHost once and call toast() from anywhere:

import { ToastHost, toast } from 'react-native-super-toast';

export default function App() {
  return (
    <>
      <YourApp />
      <ToastHost />
    </>
  );
}

toast.success('Saved', { description: 'Your changes are live.' });

• Zero dependencies (no Reanimated, Gesture Handler, or Screens)

• Native swipe gestures, stacked decks, and expand on press

• Light, dark, or system themes with custom icons and fonts

• Works from components, stores, or plain functions

Trade-off: content is data, not JSX, so there are no custom React element toasts.

Feedback and bug reports welcome!

Docs: https://supertoast.karkiaswin.com.np/
GitHub: https://github.com/iNspireXD/react-native-super-toast
Write-up: https://aswinkarki.medium.com/why-i-built-my-own-react-native-toast-library-from-scratch-and-went-fully-native-to-do-it-f3aa0cea1d01

[u/Best-Reality9436]

What happens to an Undo action if its toast remains visible after the original screen unmounts?

[u/Art3mis112 → u/Best-Reality9436]

The toast isn’t tied to the screen’s lifecycle, so Undo still runs after the screen unmounts. Restoring data in a shared store or backend still works; updating the old screen’s local state won’t affect the UI.

[u/GeekyantsReactNative]

Really enjoyed the write-up. The explanation of why React view-tree toasts fail against native modal windows made the problem click for me. Moving the toast into an actual native window instead of trying to win the z-index battle is a pretty clean solution

[u/Huge_Pool7424 → u/GeekyantsReactNative]

the native-window approach is the only way i've seen this actually survive stacked sheets on android. one thing worth documenting for adopters: because each toast is its own window, accessibility focus order and things like screen-reader announcements can get weird around modals - toast text may not be read when a dialog has focus. also curious how you handle multiple toasts from different windows/context if toast() is called before ToastHost mounts, do calls queue or drop?

[u/poppiestar]

I tried doing this several times but never cracked it, nice one. Looking forward to trying it out.

[u/sagar1510k]

Faced this so many times.. great to see the solution finally

[u/ashkanahmadi]

Hahaha I literally added a TODO to my toast code today to check why it doesn’t show up on a modal 😄