Displaying toasts while using React Navigation/expo-router

[archer3cl]

I’m trying to show a toast using https://nickdebaise.github.io/packages/react-native-toast/, but I can’t get it to appear on top of the modal.

I’m using this modal package together with React Navigation and expo-router. While the modal is open, the toast renders behind it.

I tried the recommended approach from the toast library of rendering the toast via a nested component inside the modal. That does make the toast visible, but it’s limited to the modal’s visible area. So if the modal is small, the toast can only be positioned within that height — it can’t float above or outside the modal, which isn’t ideal for my use case.

At this point I’m not sure if:

• there’s a way to make react-native-toast render above the modal when using this setup, or
• this is an expected limitation when combining this modal package with React Navigation.

Mainly looking for confirmation on whether this is supported, or if the only real options are to change how/where the toast is rendered or to use a different library altogether.

Thanks.

[lodev09]

Check this guide

[archer3cl]

Thanks for the response.

I managed to get the toast to display in the correct position using an overlay, but now it blocks interaction with everything behind it. Touch events don’t reach the sheet while the toast is visible.

If there’s a recommended way to render the toast as an overlay without intercepting pointer events (or make it pass-through), I’d appreciate any pointers.

[lodev09]

Unfortunately no other way. Just render your toast at the bottom. This a limitation. Another option is to request for passthrough support on FullWindowOverlay or RN Modal which I doubt will land :/