Double Modal blocking UI after AppState change

Description

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

https://github.com/expo/expo/issues/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

https://github.com/user-attachments/assets/315d66f6-cbe7-47a0-9e6a-826fac8b3345

Start with the linked Expo Snack reproducer and trace the AppState transition where the second modal should open after returning to iOS. Reproduce the sequence with React Native 0.76.7, then verify that closing the first modal leaves the second modal usable and the increment button responsive.