[0.76] 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

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

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.

[WilliamWelsh]

Imo this is a pretty big undocumented change/issue

[WilliamWelsh]

Could #48030 be related?

[angelica-snowit]

Could #48030 be related?

Honestly, I'm finding really strange that bug opened three days ago are fixed and instead this post didn't even received an answer. I've only wasted time creating a repo to reproduce something that apparently didn't interest anyone.

@cortinico, question for you since I see your activity on recent posts: why are you guys answering to fresh opened bugs and not to posts of weeks ago with 16 comments? Should I reopen this every day in the hope to get someone to have a look on it?

[cortinico]

@cortinico, question for you since I see your activity on recent posts: why are you guys answering to fresh opened bugs and not to posts of weeks ago with 16 comments? Should I reopen this every day in the hope to get someone to have a look on it?

Because our team is really small and we don't have the capacity to answer to everyone. We offer support as "best effort" meaning that there could be period where we're slower to respond due to team capacity.

Currently our team is hyperfocused on fixing New Architecture only bugs, which this one is not the case so that's why it got lower priority.

Honestly, I'm finding really strange that bug opened three days ago are fixed and instead this post didn't even received an answer. I've only wasted time creating a repo to reproduce something that apparently didn't interest anyone.

That specific issue was addressed by a member of the community, which sent a PR, which also fixed the issue. We're more than welcome to receive PRs that close issues like this one, as that's practically the fastest way to get those bugs sorted out.

[angelica-snowit]

@cortinico, question for you since I see your activity on recent posts: why are you guys answering to fresh opened bugs and not to posts of weeks ago with 16 comments? Should I reopen this every day in the hope to get someone to have a look on it?

Because our team is really small and we don't have the capacity to answer to everyone. We offer support as "best effort" meaning that there could be period where we're slower to respond due to team capacity.

Currently our team is hyperfocused on fixing New Architecture only bugs, which this one is not the case so that's why it got lower priority.

Honestly, I'm finding really strange that bug opened three days ago are fixed and instead this post didn't even received an answer. I've only wasted time creating a repo to reproduce something that apparently didn't interest anyone.

That specific issue was addressed by a member of the community, which sent a PR, which also fixed the issue. We're more than welcome to receive PRs that close issues like this one, as that's practically the fastest way to get those bugs sorted out.

Every react native app that use, to say one, Stripe library, can't update to RN 0.76 because of this.
The fact that bugs on the New Architecture, that is optional, are more important than the ones on both old and new architecture, still seems absurd to me.

Anyway, answering doesn't take so much time. I wasn't wondering why this bug hasn't been resolved, I was wondering why it doesn't seems to interests anyone since the lack of response.

Now, at least, I know that someone is aware of this.

[cortinico]

Every react native app that use, to say one, Stripe library, can't update to RN 0.76 because of this.
The fact that bugs on the New Architecture, that is optional, are more important than the ones on both old and new architecture, still seems absurd to me.

Please note that we also use the GitHub reaction feature (the '👍') to asses how many community users got affected by a bug, and this one had none.

Unfortunately with so many open bugs daily, is extremely complicated to distinguish between noise and real bugs

[angelica-snowit]

So, 4 answers saying "the same", with 4 thumbs up, worths nothing if no one add a thumb up to the first post.
Got it!

[cortinico]

So, 4 answers saying "the same", with 4 thumbs up, worths nothing if no one add a thumb up to the first post.

Sadly answer "the same" does nothing other than creating unnecessary noise. We have 500+ issues and we don't look at every single comments. Top level reactions instead can be used to filter with the GitHub issue filter feature.

[angelica-snowit]

Yeah, got it. Again.

[angelica-snowit]

#48065 (just picked the first in line)
No logs, no repo, no way to reproduce, no thumbs up: answered in less than an hour.
Honestly, just answer "oh, we missed this" would have sounded better.

[cortinico]

Reopening as the issue is actually not fixed.

Honestly, just answer "oh, we missed this" would have sounded better.

We haven't missed it. I answered on this issue 2 weeks after we opened it. There is no SLA on we respond to issue. As I said before, we do have hundreds of open issues and we do our best to answer as many as we can.

[angelica-snowit]

As you wish.
Good work.

[MafeeTech]

This issue might caused by this PR:

dea5a6c#diff-99db04a88673cd58c6b483a6b9a8ae2e39f85a31307bb6b23547ede14ed067b5R136

I’m not familiar with iOS development, but I guess that when trying to present the second modal, the _topMostViewControllerFrom method retrieves the first modal that is in the process of being dismissed.

Below is the relevant error screenshot:

I have tested without this change, everything is fine.

This PR has already been reverted in the main branch, so if it's not urgent, you can wait for the latest version to be released, and it should resolve the issue.

[cortinico]

This issue might caused by this PR:

Unlikely because the linked PR was included in 0.75 also and @angelica-snowit mentioned that this is a regression 0.75 -> 0.76

[KarlaSaenz]

@cortinico, Do you have any updates on this?

[cortinico]

0.76.4 should contain the fix which solves the root cause of this issue

[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

Upgraded from 0.76.2 to 0.76.4 and I still have this issue

[KarlaSaenz]

@cortinico, After upgrading to 0.76.4, the issue persists.

[cortinico]

Ok then I sadly have no idea what could be causing this issue. It would require further investigation. Any help from the community would be more than welcome

[zhongwuzw]

Hi, If anyone can provide a repo, I can have a look :)