Closed varungupta85 closed 1 week ago
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.
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.
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
Open Modal Screen
open modal screen
before switching tabs@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.
@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" ``` |
https://github.com/user-attachments/assets/db169e65-6abd-47c3-8199-74a16d7f3dc0 | https://github.com/user-attachments/assets/becc66bb-c312-470e-a2e3-8d9a501cbcb9 |
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.
@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.
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 thetransparentModal
s 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 thepresentation
style to anything other thantransparentModal
, 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 https://github.com/react-navigation/react-navigation/issues/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