[0.76.5] Modal glitchy behavior on iOS

[vsheyanov]

Description

My issue is closely related to #47694. Initially I didn't see 2nd modal at all (in 0.76.3), but after updating to 0.76.5 at least 2nd Modal started appearing.

But what I noticed is that hiding animation shows artifacts of the previous render of a Modal if I render conditionally.

Possible "fix\hack" that I found for now is to render both Modals, but to control visibility property. This of course is a sub-optimal solution since no one wants to render all Modals.

Please check my videos and reproduction repository.

Steps to reproduce

1. install app from the repo
2. Open ModalContent.tsx
3. Ensure that lines are not commented out

if (!visible) {
    return null;
  }

4. Run iOS.
5. Open/Hide Modals multiple times. After the first time, you'll start seeing UI glitch when it renders a Modal from previous state during Hiding transition.

Possible fix:

1. disable lines with

if (!visible) {
    return null;
  }

This will force rendering of both components, but visibility will be controlled by visibility property of the Modal.
2. Run iOS
3. Try opening/hiding Modal
4. Verify it hides/show properly without issues.

React Native Version

0.76.5

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 15.1.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 85.80 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.1
    path: ~/.nvm/versions/node/v18.19.1/bin/node
  Yarn: Not Found
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v18.19.1/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
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: 2024.2 AI-242.23339.11.2421.12550806
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.7.8
    path: /opt/homebrew/opt/[email protected]/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.5
  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 a UI bug

Reproducer

https://github.com/vsheyanov/react-76-4-modal-bug/tree/main

Screenshots and Videos

Not rendering a Modal based on a state	Hiding using visibility based on a state
1st time - looks ok 2nd and 3rd - during closing animation you can see that it shows the previous state modal-ui-bug.mp4	Looks as expected. Modals switch each other without any glitches. modal-ui-bug-normal.mp4

[zhongwuzw]

May fix in #48252 .