Double Modal blocking UI after AppState change

[BrodaNoel]

Description

Issue already reported on Expo, but seems to be unrelated to Expo

expo/expo#35779

What platform(s) does this occur on?

iOS

Where did you reproduce the issue?

• in Expo Go
• In a standalone app
• In a development build

Important considerations

• New Architecture is DISABLED on my project, and I see this bug.
• New Architecture is ENABLED on Expo Go, and I see this bug.

Summary

The app get totally freezed when I do this:

• Open modal (and do NOT close it)
• Move the app to background
• Open the app again
• When the app opens again, there is a modal that will be automatically opened
• The app freezes after closing the first modal it was opened before background

The app will check the AppState change, and it will open the "SECOND" modal. But it will not be shown.
Click on "Close" on the first modal you leaved opened.

Then try to tap on the "Tap here to increment number".
You will see it doesn't increment.

I'm not sure if this is an Expo or React Native error

Environment

expo-env-info 1.2.2 environment info:
    System:
      OS: macOS 12.7.6
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
      Yarn: 1.22.22 - ~/.nvm/versions/node/v20.11.1/bin/yarn
      npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
      Watchman: 2024.04.15.00 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.15.2 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    IDEs:
      Android Studio: 2023.2 AI-232.10300.40.2321.11668458
      Xcode: 14.2/14C18 - /usr/bin/xcodebuild
    npmPackages:
      expo: ^52.0.41 => 52.0.41
      react: 18.3.1 => 18.3.1
      react-native: 0.76.7 => 0.76.7
    npmGlobalPackages:
      eas-cli: 16.1.0
    Expo Workflow: managed

Expo Doctor Diagnostics

Not necessary. You can reproduce it on Expo Go.

But... Just in case:

14/15 checks passed. 1 checks failed. Possible issues detected:
Use the --verbose flag to see more details about passed checks.

✖ Validate packages against React Native Directory package metadata
  The following issues were found when validating your dependencies against React Native Directory:
  Unsupported on New Architecture: react-native-maps
  Untested on New Architecture: @likashefqet/react-native-image-zoom
  No metadata available: @amplitude/analytics-react-native, country-emoji, haversine-distance, lodash.debounce, react-native-uuid, rn-prompt, sunrise-sunset-js, use-interval
  Advice:
  - Use libraries that are actively maintained and support the New Architecture. Find alternative libraries with https://reactnative.directory.
  - Add packages to expo.doctor.reactNativeDirectoryCheck.exclude in package.json to selectively skip validations, if the warning is not relevant.
  - Update React Native Directory to include metadata for unknown packages. Alternatively, set expo.doctor.reactNativeDirectoryCheck.listUnknownPackages in package.json to false to skip warnings about packages with no metadata, if the warning is not relevant.

1 check failed, indicating possible issues with the project.

Steps to reproduce

• Open the Snack with your iPhone
• Touch the "Tap here to increment this number", so you see that touch is OK
• Touch the "Tap here to open the modal". This will open the "FIRST" modal.
• Move the app to background
• Open it again

React Native Version

0.76.7

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info

info Fetching system and libraries information...
System:
  OS: macOS 12.7.6
  CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Memory: 132.00 MB / 8.00 GB
  Shell:
    version: 5.8.1
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.1
    path: ~/.nvm/versions/node/v20.11.1/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.11.1/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v20.11.1/bin/npm
  Watchman:
    version: 2024.04.15.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.2
      - iOS 16.2
      - macOS 13.1
      - tvOS 16.1
      - watchOS 9.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10300.40.2321.11668458
  Xcode:
    version: 14.2/14C18
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.7
    wanted: 0.76.7
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.78.1 is now available (your project is running on v0.76.7).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.78.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.76.7&to=0.78.1
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Stacktrace or Logs

There is no error log. Just a wrong behavior.

Reproducer

https://snack.expo.dev/@brodanoel/broken-modal

Screenshots and Videos

trim.A98CB7F0-226E-47AD-A8F7-7252E0337976.MOV

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.76.8. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[BrodaNoel]

Something important to consider:
I'm building React Native apps since around ~2016. I remember that this issue was there around 2017, but I could create a workaround at that time.

Now, I faced it again (on another project). So, this issue may be there since... 10 years ago.
Maybe it was fixed and now it's there again.

If you find a fix, consider creating a E2E test, in order to avoid having it again in the future 🙏

[cipolleschi]

Hi @BrodaNoel, i tried the same reproducer using the Modal example we have in RNTester.
RNTester is an app we have in the RN repository to test RN features and that is the app we use for our E2E tests.

However, the issue does not reproduce on RNTester, as you can see in the video below.

Could it be that there is something in your code or another library involved that can be cause of the issue?

[BrodaNoel]

@cipolleschi But... Did you actually opened a second (2nd) modal after the app went back to active, as it's mentioned in the steps to reproduce? As far as I see, you closed only 1 modal, so, there were no 2 modals opened there. Something seem to be broken (or maybe you haven't seen the description that mention about 2 modals being opened)

[BrodaNoel]

Please make sure to read carefully the description of the issue. There should be 2 modals opened in some moment.

Again, steps to reproduce:

• "Modal 1" should be opened
• Move the app to background
• Open the app (and when this happens, automatically open a "Modal 2")
• Modal 2 should be opened (this doesn't happens. it's broken)

User should be able to close Modal 2 and then Modal 1.

Currently, as soon as the code tries to open Modal 2, the modal 2 is not opened, so you still see Modal 1 and you close it.
After that, seems like Modal 2 is opened in some shadow-way, blocking the UI.

[Nantris]

@BrodaNoel Modal2 appears for me on Android. I wonder if this is specific to iOS?

I don't think you're facing the same issue as me, but dropping a link in case it might be of any help: #50415 (though I'm working primarily on Android)

[BrodaNoel]

I only tested it on iOS

[cipolleschi]

Oh, I see.
Opening multiple modals is not something iOS allows easily. We fixed that in a commit but we have to revert it because it was causing other issues. As of today, I don't think that this feature is working in the New Architecture.

The problem here is that, when the you present a new modal, you can only present it in the topmost ViewController.
In our scenario, we have:
App

• Modal1
  • Modal2

App should present Modal1, and Modal1 should present Modal2

However, upon resuming the App, the Modal1 is shown, and the App tries to present Modal2, but Modal1 is already presented and iOS prevent Modal2 to be shown.

[BrodaNoel]

Interesting. I'll try a workaround to open Modal 2 only when Modal 1 gets close.

Grazie mille!