search

software-mansion / react-native-screens

Native navigation primitives for your React Native app.
MIT License
2.99k stars 507 forks source link

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 #2167

Closed varungupta85 closed 1 week ago

varungupta85 commented 2 months ago

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:

Screenshot 2024-06-02 at 8 07 12 AM

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:

Screenshot 2024-06-02 at 8 17 34 AM

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 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

varungupta85 commented 2 months 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.

alduzy commented 2 months ago

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 commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

@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
steven-isbell commented 1 month ago

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 commented 3 weeks ago

@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.