When using native toasts from Burnt, FullWindowOverlay is hiding the whole content

[tboba]

Discussed in https://github.com/software-mansion/react-native-screens/discussions/1907

^{Originally posted by @wcastand September 29, 2023}

Description

Trying to use Burnt but the native toasts are hidden behind my FullWindowOverlay component. i need it because it's a pin code security so need to go above all other window, modal included but not toasts x)

i have a screen inside a FullWindowOverlay that is used when the user comeback after X seconde to ask for a security pin code, since i need this screen as a security it's over everything in the app and i used FullWindowOverlay to achieve that.

when we tried to use burnt, the toast it creates is also hidden by the FullWindowOverlay screen, even if i call the toast inside the FullWindowOverlay component.

i'm no expert but from what i understood, burnt use the app root view as the parent for the toast but FullWindowOverlay create a view above the root to be above everything which means it's also above the toast.

Current hierachy (assuming FullScreenWindowOverlayContainer is a FullWindowOverlay and SPIndicatorView is a toast)

it's the view hierarchy when the toast is hidden behind the full window overlay (i called the toast inside the full window overlay component and it's hidden behind it still)

Steps to reproduce

Create a FullWindowOverlay and try to create a native toast from Burnt library. Native toast should be visible there, but it is not.

Screens version

3.25.0, but I would assume this occurs on every react-native-screens version.

React Native version

0.72.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 15 Pro Max (iOS 17.0)

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[karankalsi]

I can confirm that this issue is happening after opening a react-native Modal.

[kkafar]

Hey, I do not consider it an issue on our side. FullWindowOverlay does exactly what it name suggests - it is presented above all content. Yes, indeed, it is mounted under dedicated UIWindow subview, but it is done on purpose, because in any other case it won't be able to be presented above modals. Hence I believe we won't be introducing changes in this matter on our side.

It might be worth changing the implementation of burnt library that you're using, so that it is presented above the FullWindowOverlay component.

Ping me if any new relevant information emerges.