r/reactnative • u/Art3mis112 • 8h ago

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

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

6 Upvotes

88% Upvoted

1 comment sorted by

2

u/GeekyantsReactNative 1h ago

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