Doesnt work with react-navigation/native

The toaster doesnt appear when using @react-navigation/native lib. Have followed as shown in https://github.com/calintamas/react-native-toast-message#how-to-render-the-toast-when-using-react-navigation

I have placed <Toast/ > as last element inside <NavigationContainer>....</NavigationContainer>.

Any one else having same issue?

[charlotteisambert]

I don’t know if this may help, but it didn’t work for me because I placed the Toast element above my screens. Make sure you placed the<Toast ref={(ref) => Toast.setRef(ref)} /> after all of your screens:

<NavigationContainer>
      {...}
      <Toast ref={(ref) => Toast.setRef(ref)} />
</NavigationContainer>

and not

<NavigationContainer>
      <Toast ref={(ref) => Toast.setRef(ref)} />
      {...}
</NavigationContainer>

[AdriaRios]

Hey @calintamas !

When we use a modal navigation, the toast appears below the view. We are following your recommendation, no luck.

Any idea? Thank you!

EDIT

Ok, I found why and maybe this could help to more people. To get the toast correctly working when you are using modals to navigate, the presentation prop must be:

• containedModal
• containedTransparentModal

If you use another type (modal, fullScreenModal or transparentModal), iOS will place the new modal above everything, including your awesome toast.