Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[0.76.5] Modal glitchy behavior on iOS #48245

Open
vsheyanov opened this issue Dec 12, 2024 · 1 comment · May be fixed by #48252
Open

[0.76.5] Modal glitchy behavior on iOS #48245

vsheyanov opened this issue Dec 12, 2024 · 1 comment · May be fixed by #48252
Labels
Component: Modal Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: iOS iOS applications. Resolution: PR Submitted A pull request with a fix has been provided.

Comments

@vsheyanov
Copy link

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;
  }
  1. Run iOS.
  2. 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/ruby@2.7/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
@vsheyanov vsheyanov mentioned this issue Dec 12, 2024
Closed
@cortinico cortinico added the Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. label Dec 12, 2024
@zhongwuzw zhongwuzw linked a pull request Dec 13, 2024 that will close this issue
Open
@zhongwuzw
Copy link
Contributor

May fix in #48252 .

@migueldaipre migueldaipre added Resolution: PR Submitted A pull request with a fix has been provided. and removed Needs: Triage 🔍 labels Dec 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: Modal Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: iOS iOS applications. Resolution: PR Submitted A pull request with a fix has been provided.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[iOS] Fabric: Fixes Modal snapshot when closing it zhongwuzw/react-native
5 participants
@vsheyanov @cortinico @zhongwuzw @migueldaipre @react-native-bot