Modals different behaviour on iOS in v0.76

[angelica-snowit]

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]

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]

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]

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

[angelica-snowit]

Any news on this?

[KaramDevelopment]

I have a band-aid solution. It seems that, currently, only one modal can be shown at a time. When you quickly switch from modal1 to modal2, the render breaks. This appears to happen because the animation for modal1 hasn’t completed before modal2 is triggered.

To resolve this, you need to add a timeout. The duration (in milliseconds) depends on the animationType of the modal. For example, with animationType set to "none," 10ms works, but if you use the "slide" animation, 500ms is needed.

This solution isn't optimal because I’m not sure if the animation speed is consistent across different devices or how the timing might be affected. Unfortunately, there doesn’t seem to be a reliable way to wait for the animation to complete. Hoping a permanent solution is implemented soon!

setModal1(false);
setTimeout(() => setModal2(true), 10);

[angelica-snowit]

I have a band-aid solution. It seems that, currently, only one modal can be shown at a time. When you quickly switch from modal1 to modal2, the render breaks. This appears to happen because the animation for modal1 hasn’t completed before modal2 is triggered.

To resolve this, you need to add a timeout. The duration (in milliseconds) depends on the animationType of the modal. For example, with animationType set to "none," 10ms works, but if you use the "slide" animation, 500ms is needed.

This solution isn't optimal because I’m not sure if the animation speed is consistent across different devices or how the timing might be affected. Unfortunately, there doesn’t seem to be a reliable way to wait for the animation to complete. Hoping a permanent solution is implemented soon!

setModal1(false); setTimeout(() => setModal2(true), 10);

This is not a problem that requires a workaround. The behaviour has simply changed, I haven't experienced layout problems or render breaks. The problem is that the change is a breaking one (not only for my app where I have to remove modals from inside modals or I will see them twice, but for many react native libraries like Stripe), and it's not addressed in the changelog even as a minor.

[KarlaSaenz]

This undocumented change impacts many projects we're updating from older versions. It's specific to iOS, while Android continues to function as expected. We require clarification on whether this change will be rectified to facilitate informed decision-making for our projects.

[angelica-snowit]

This undocumented change impacts many projects we're updating from older versions. It's specific to iOS, while Android continues to function as expected. We require clarification on whether this change will be rectified to facilitate informed decision-making for our projects.

Exactly. It would be very nice to get an anwser or at least an hint of awareness from the dev team.

[umutturkeri]

i have similar issues,before RN 0.76 in one page i used 2 modals, edit and add modals.now when i tried to open any modal, first previous modal opening and closing after that if i press buton again modal is opening.its not about being different modal.Example i opened add modal after that i closed.When i want to open add modal its opening and closing for 1 second.