On iOS Toast shows behind notch

[Pixele9]

I have configured the Toast as it says in the docs. But it appears behind the notch when it is not triggered.

Is there a way to move it further back to prevent it from displaying? Any work around?

Thanks in advance!

[younisabuzayed]

If you use nativebase and wrap Toast. this is problem. You can wrap in react navigation no problem but nativebase no. this link you can find a solution : https://github.com/calintamas/react-native-toast-message#how-to-render-the-toast-when-using-react-navigation

[nibblesnbits]

@younisabuzayed, I've implemented the solution suggested, but it doesn't work. I still get the toast showing outside where SafeAreaView would render it.

[younisabuzayed]

Can you send code when you put " <Toast ref={(ref) => Toast.setRef(ref)} />" on in your code?

[Pixele9]

In my case I solved it by moving the Toast component outside the SafeAreaView like this:

[ToshKoevoets]

Also use when using on web and native, not possible to set opacity to 0 when in active? would be a lot more stable solution; my setup is a bit more layered

[calintamas]

Also use when using on web and native, not possible to set opacity to 0 when in active? would be a lot more stable solution; my setup is a bit more layered

@ToshKoevoets Starting with v2.0.0, opacity is indeed 0 when the Toast is not visible.

In my case I solved it by moving the Toast component outside the SafeAreaView like this:

That's exactly right, the Toast instance has to be alongside NavigationContainer. More details can be found here - Usage with react-navigation.

I'll close the issue. If you find anything else, feel free to reopen.