Architecture
How Super Toast renders above modals and bottom sheets on iOS and Android.
Overview
Every call to toast() goes through the same JavaScript pipeline, then hands off to a platform backend.
Resolve
toast() merges the toast options with the ToastHost defaults, the active theme palette, and variant styles. The result is plain, serializable data: text, colors, icon descriptors, and a fixed set of style keys.
Render natively above the view tree
- iOS — native views are drawn in an overlay
UIWindow. The window sits above presented view controllers, so toasts stay visible over modals, form sheets, and bottom sheets. - Android — each toast is presented in its own non-focusable dialog window drawn with native views.
On both platforms the TurboModule owns rendering, animation, and gestures; JavaScript only sends data and receives events.
Report events
Presses, actions, dismissals, and timeouts are sent back to JavaScript as events, where the matching callbacks (onPress, action.onClick, onDismiss, onAutoClose) run exactly once per toast.
Why content is data
Both platforms draw toasts in native windows outside the React tree, so toast content cannot be arbitrary JSX. Icons, buttons, and styles are described as data that both platforms render identically. See Platform behavior for the resulting limitations.
Dependencies
Super Toast has no dependencies beyond React and React Native. There is no Reanimated, Gesture Handler, Screens, or SVG dependency.