~/docs/modals

Modals and dialogs

A native modal is its own window above the app, so a Toaster at the root draws underneath it. There are two ways out, and you can use both.

A Toaster in the modal

Every mounted Toaster is a host, and only the newest one shows toasts. Mount one inside the modal and the toasts move there while it is open, then come back to the root when it closes. This works on iOS and Android.
<Modal visible={open}> <Screen /> <Toaster /> </Modal>
Copy
The store is shared, so a toast fired from anywhere lands in whichever Toaster is on top, and only one renders it.

A full-window overlay on iOS

Or render the root Toaster in FullWindowOverlay from react-native-screens, which sits above every modal:
import { Platform } from 'react-native'; import { FullWindowOverlay } from 'react-native-screens'; <Toaster container={Platform.OS === 'ios' ? FullWindowOverlay : undefined} />;
Copy
The toast from sileo, ported to React Native. Built in the open by rayanstudio.
© 2026 rayan · MIT License
A native port of sileo by hiaaryan