transparentModal doesn't appear on the screen although it is rendered due to which the whole app becomes unresponsive after upgrading from react-native 0.72.5 to 0.73.8

[varungupta85]

Current behavior

I am experiencing a very strange problem. I recently updated react-native version from 0.72.5 to 0.73.8. After the upgrade, I no longer see one of the transparent modal screen that is shown on app start up. It is rendered on the screen due to which I can't tap elsewhere on the screen and if I tap on the area where the cancel button for the modal screen would have been displayed, the modal is dismissed and I am able to use the rest of the app as expected.

If I change the presentationStyle to modal or anything else, then the screen appears okay. It also happens only the first time such a screen is shown. After I dismiss the transparent modal as described above, it appears fine afterwards.

I tried to create a snack to showcase the problem but I don't see the problem in the snack. I am sharing the snack nonetheless. I am currently stuck on this and not able to release any new features on Android. Any help is greatly appreciated.

Expected behavior

The transparent modal should appear as expected.

Reproduction

https://snack.expo.dev/@varungupta85/react-navigation-transparentmodal-issue

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.17
@react-navigation/bottom-tabs	6.5.20
@react-navigation/native-stack	6.9.26
react-native-safe-area-context	4.9.0
react-native-screens	3.30.1
react-native-gesture-handler	2.16.0
react-native-reanimated	3.8.1
react-native	0.73.6
node	18
npm or yarn	9.6.7

[varungupta85]

I am not using expo. I am not sure if that would create a difference. Also, the transparentModal appears fine on iOS.

[varungupta85]

For e.g., check the below screen with element inspector on

As you see, there is a RequiredPermissionsScreen with white background but nothing is shown. So, the screen is rendered but somehow it doesn't show on screen.

If I add a timeout before the screen is rendered, then the transparent modal appears fine as shown below

Even the buttons are present when the screen is not displayed and if I tap in that area although the button is not visible, the screen disappears and I can continue to use the app.

If I change the presentation to anything other than transparentModal, it appears fine.

Please share anything that could be wrong and I will try it out.

[github-actions]

Hey! Thanks for opening the issue. Seems that this issue is related to react-native-screens library which is a dependency of React Navigation. Can you also post your issue in this repo so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it.

[varungupta85]

Okay, I will post it there also. Just wanted to share that I have also tried disabling animation and adding a timing animation to the screen in the hopes that since the screen after adding a timeout, if I can just add a timing timeout to the screen animation, the screens may start to show. I have many other transparentModal screens due to which I am not able to use the setTimeout workaround.

[varungupta85]

I have moved to JS based stack @react-navigation/stack which seems to have fixed the problem.

[steven-isbell]

Adding to this thread, I'm seeing the same behavior on android only, iOS is working as expected. We have a tab stack that has screens with a presentation of transparentModal. When you navigate to one of the transparentModal screens, the modal renders behind the parent screen. This only happens on one of our tabs, the other tabs also have transparentModals, but they work as expected.

Using the JS stack instead of the native stack does solve the problem, but is not ideal.

Versions

"react-native": "0.74.1"
"@react-navigation/bottom-tabs": "6.5.20"
"@react-navigation/core": "6.4.16"
"@react-navigation/native": "6.1.17"
"@react-navigation/native-stack": "6.9.26"
"@react-navigation/stack": "6.3.29"
"react-native-screens": "3.31.1"

I responded to the closed issue on React Native Screens here

[alduzy]

Try bumping the versions to 7.0.0-rc. It seems to solve the issue: software-mansion/react-native-screens#2167 (comment)