FAQ
Common questions about showing toasts above modals and bottom sheets in React Native.
Short answers to the questions that come up most often. If something is missing, open an issue.
How do I show a toast above a modal in React Native?
Render a single ToastHost near the root of your app and call toast() from anywhere, including from inside the modal. Super Toast draws toasts outside the React view tree — in an overlay UIWindow on iOS and in a separate dialog window on Android — so a presented modal, form sheet, or bottom sheet cannot cover them. No extra setup or second host is needed.
Why is my toast hidden behind a native modal?
Most toast libraries render their toasts as React views inside your app’s view tree. When iOS presents a modal view controller or Android opens a dialog window, that window is placed above your React tree, so anything inside it — including the toast — is covered or dimmed by the modal backdrop. The fix is to render the toast above that layer instead of inside it.
Does it need Reanimated, Gesture Handler, or Safe Area Context?
No. Super Toast has no runtime dependencies beyond React Native itself. Animations, swipe gestures, and safe area insets are handled by the native code on each platform, so there is no animation or gesture stack to install, configure, or keep in sync.
Does Super Toast work with Expo?
Yes, with a development build. The package ships native code as a TurboModule, so it cannot run in Expo Go. Install it, then create a development build or use a custom dev client.
What are the requirements?
React Native with the New Architecture enabled, because the native module is a TurboModule. Android requires minSdkVersion 24. On iOS, the minimum version is whatever your React Native version supports.
Can I render custom JSX inside a toast?
No. Toast content is serializable data rendered by native views, not React elements, which is what keeps toasts identical on iOS and Android and lets them live above the view tree. You can set the title, description, icons, action buttons, colors, fonts, and position, but there is no toast.custom that takes JSX.
Does it support promises, actions, and updating a toast in place?
Yes. toast.promise() swaps a loading toast for a success or error state, every toast call returns an id you can use to update, wiggle, or dismiss it later, and toasts can carry an action and a cancel button with their own handlers.
How is it different from sonner-native or react-native-toast-message?
Those libraries render toasts inside the React view tree, which is why a native modal or bottom sheet can cover them, and they accept arbitrary JSX. Super Toast renders natively above the view tree, so toasts stay visible and tappable over modals, in exchange for a fixed, data-driven content model.