transparentModal doesn't appear on the screen although it is rendered after upgrading from react-native 0.72.5 to 0.74.1 on Android 14

[varungupta85]

Description

I use transparentModal to show overlays at many different places in the app. I have been using this for quite some time in my production app. I recently updated from react-native 0.72.5 to 0.74.1. After updating, some of the transparentModals are not shown even though they are rendered. Please see the screenshots below:

As you can see above, RequestPermissionsScreen is rendered and be selected on the Element Inspector but it is not visible at all. If I add a timeout before rendering the screen, the overlay is seen as shown below:

When the screen is not visible as shown in screenshot 1, if I tap where the buttons are in screen 2, the onPress handler is invoked. If I change the presentation style to anything other than transparentModal, then screen appears fine but it no longer appears as an overlay now.

Also, it only happens on Android 13 and Android 14. We tried on Android 12 and lower and the screen appears okay.

What could possibly cause the screen to not display like this. I have also tried disabling animations and adding a timing animation but none of those helped either. I am currently stuck on this and I am not able to release any new features for Android. Please suggest what could be wrong here.

I have earlier reported this issue at react-navigation/react-navigation#12009 but I was suggested to post it here also.

Steps to reproduce

Although I tried reproducing it in a snack but I didn't see it in the snack. I am not using Expo in my app but the snack uses Expo, so I am not sure if that is the reason I don't see problem in the snack. I am sharing a link to the snack nonetheless.

Snack or a link to a repository

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

Screens version

3.31.1

React Native version

0.74.1

Platforms

Android

JavaScript runtime

JSC

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Samsung Galaxy S24

Acknowledgements

Yes

[varungupta85]

Using @react-navigation/stack without any other change also fixes the problem. As such I don't see any loss in performance after switching to JS based navigation, so I will probably go with this for now and switch back to native navigation once I fix the problem.

[alduzy]

Thanks for reporting the issue. Unfortunately I wasn't able to reproduce it using the snack you provided nor by copying your code to a bare workflow app and trying it on an Android 14 Emulator.
Please don't hesitate to ping me in case you have a reproducible snack or any relevant info about the issue.

[steven-isbell]

I created another reproduction of this issue with this snack

@alduzy let me know if I should open a new issue

The gist of the issue is that if a transparentModal is nested in a tab stack, it will open behind the parent screen in the stack instead of on top of it if you go to another tab and back to the tab that navigates to the modal before opening the modal.

If you open the modal before you navigate to another tab, or you set unmountOnBlur: true on the options for TabStack Screen that holds the nested navigator so that it remounts every time you go back to the tab, it works fine.

This issue only exists on android.

reproducible steps are

1. Run on android device
2. Once the application loads, swap to the second tab without interacting with the first tab
3. swap back to the first tab
4. press Open Modal Screen
5. nothing will happen
6. swap to iOS device
7. perform steps (2-4)
8. modal will open as expected
9. Swap back to android device
10. when the app loads, press open modal screen before switching tabs
11. modal will open as expected

[alduzy]

@steven-isbell thanks for submitting the message, no need to open a new issue. I'm going to re-open this one and look into it.

[alduzy]

@steven-isbell I can confirm I was able to reproduce the issue using your snack and the versions you specified in related navigation issue.

Bumping the navigation packages versions to 7.0.0-rc solves the issue for me. Let me know if that works for you.

Make sure to follow upgrading guide when bumping.

"@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-native-screens": "3.31.1"	"@react-navigation/bottom-tabs": "7.0.0-rc.21", "@react-navigation/core": "7.0.0-rc.10", "@react-navigation/native": "7.0.0-rc.10", "@react-navigation/native-stack": "7.0.0-rc.16", "react-native-screens": "3.32.0"
Screen.Recording.2024-07-19.at.10.39.39.mov	Screen.Recording.2024-07-19.at.10.16.40.mov

[steven-isbell]

Thanks for looking into this. I'm still currently seeing the same issue on android emulator using the 7.0.0-r.c.. The first time I open the transparentModal when switching to the tab, it opens in the background. If I dismiss, it loads correctly. I'll continue to check some of our implementation.

[alduzy]

@steven-isbell Have you managed to solve the issue on your side? As previously I am unable to reproduce the issue using the latest version of react-native-screens and the v7 @react-navigation packages.

[phuongwd]

Thanks for looking into this. I'm still currently seeing the same issue on android emulator using the 7.0.0-r.c.. The first time I open the transparentModal when switching to the tab, it opens in the background. If I dismiss, it loads correctly. I'll continue to check some of our implementation.

I'm facing the same issue on iOS

"react-native-screens": "^3.19.0",
"@react-navigation/bottom-tabs": "^6.5.3",
"@react-navigation/native": "^6.1.2",
"@react-navigation/native-stack": "^6.9.8",
"@react-navigation/stack": "^6.3.11",

[alduzy]

@phuongwd Try updating your packages. Let me know if the issue persists with the latest version and if so please attach a reproduction.

[clspeter]

Hello @alduzy,
I have a similar problem which will make transparentModal invisible.
It was using expo-router which is depend on @react-navigation
Could you have a look in to it?
Let me know if you need further infomation.
Thank you very much.

"@react-navigation/bottom-tabs": "^7.2.0",
"@react-navigation/native": "^7.0.14",
"react-native-screens": "~4.4.0",

here is the reproduction repo https://github.com/clspeter/transparent-modal-invisible-reproducible with detail.

Reproducible Steps
Android Device

1. Go To STACK0
2. Go To STACK1 and go back to STACK0
3. Go To STACK2 and go back to STACK0
4. Press TRANSPARENT MODAL IN STACK0

[kkafar]

@clspeter hey, the reproduction link you provided does not work - I got 404 page -> the repo is either private or the link is incorrect. Please fix this & ping me to take a look again

[clspeter]

@kkafar Apologies for invaild link, here is the correct link https://github.com/clspeter/transparent-modal-invisible-reproducible

[clspeter]

Hi @kkafar, I have attach a video for more clearlyfication. You can see the transparent modal is mount with Toast, but modal is invisible, also the modal still can be touch and press.

invisible_modal.mp4

[kkafar]

Thanks @clspeter. I'll try to look into it by the end of the week

[TheVitya]

Hello, I am experiencing the same issue on android and ios as well. The only difference that we are using containedTransparentModal presentation.

"@react-navigation/bottom-tabs": "7.2.0",
"@react-navigation/native": "7.0.14",
"@react-navigation/native-stack": "7.2.0",
"react-native-screens": "4.5.0",

[kkafar]

Update: haven't looked into it yet. Will be able to do it todays evening / tomorrow

[TheVitya]

Hello, @kkafar do you need any help here from our side to solve this issue? Maybe if you give us some directions we could help solving it.

[kkafar]

I'm looking into it just right now. I confirm that I can reproduce the issue on latest screens & react navigation packages.

[kkafar]

should be solved with: #2647

I'll release 4.6.0-beta.1 in few minutes. If anyone affected @TheVitya @clspeter has capacity to test the version & give some feedback that would be great.

[clspeter]

@kkafar, I rebuilt my app and tested it. It worked. Thank you so much for your help and support!

[TheVitya]

@kkafar I can confirm, seems to be working fine.

[kkafar]

Thanks. The fix is available for everyone with 4.6.0-beta.1 version. I'll release stable version by the end of the week (that is at least current plan)

[clspeter]

@kkafar After updating react-native-screens to version 4.6.0, the issue still persists. It seems I made an error in my earlier testing.
I have updated the repository. Could you take a look? Thank you.

Note: If facing c++ error while building, rename project folder to shorter name.

[kkafar]

Whaaaat?! That surprises me. I'll try to look at that sometime soon, but please make sure that you're running 4.6.0 version of the library and not the version bundled with expo go.

[clspeter]

I have cleaning up node_modues, android folder.
Check node_modue/react-native-screen version and

npx npm ls react-native-screens
[email protected] C:\Users\mustp\.project\tmir
├─┬ @react-navigation/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ @react-navigation/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└── [email protected]

Using development builds which build in macOS, windows, and eas build all with same result.