facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.41k stars 24.36k forks source link

Modals different behaviour on iOS in v0.76 #47694

Open angelica-snowit opened 5 days ago

angelica-snowit commented 5 days ago

Description

Before RN v0.76, on iOS, to see a Modal in top of another Modal you had to put the modal inside the first modal. Now this behavior has changed and it's possible to see the Modal on top of the first Modal even if it's not inside the Modal. It's difficult to explain, but I prepared a clear example. Enabling or diasbling new architecture doesn't change. It seems like a bugfix and not a bug, because the new behavior it's pretty better, but I think it should be reported as a breaking change. The effect is that after upgrading to RN 0.76, I started to see double modals appearing since they are repeated inside modal to works on RN < 0.76. I don't know if this is the same on Android because on Android I don't use modals this way.

Steps to reproduce

  1. Open the example with v0.76 and test the Modals: open Modal 2 and then open Modal 1 with the buttons, you will correctly see Modal 1.
  2. See the difference changing to v0.75: Modal 2 will not open when using the button from inside Modal 1. The only way it's to duplicate the <Modal ...> inside the Modal 2 body.

React Native Version

0.76.1

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 15.0.1
  CPU: (11) arm64 Apple M3 Pro
  Memory: 172.33 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.18.0
    path: ~/.nvm/versions/node/v20.18.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.18.0/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.18.0/bin/npm
  Watchman:
    version: 2024.10.07.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/angelicarosa/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.7.4
    path: /Users/angelicarosa/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

It's not a crash.

Reproducer

https://github.com/angelica-snowit/rn76-modal-example

Screenshots and Videos

No response

react-native-bot commented 5 days ago

[!WARNING] Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

react-native-bot commented 5 days ago

[!WARNING] Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

WilliamWelsh commented 4 days ago

I have the same issue. Before 0.76, it worked fine. For example

    setShowEmailModal(false);
    setShowPhoneModal(true);

Would work, the email modal would go away and the phone modal would show up. Now, the phone modal can only show up if I do this

    //setShowEmailModal(false);
    setShowPhoneModal(true);

Showing it on top of another, which isn't ideal