Modal's children are rendered in the top left corner for the first few frames when it's opened (Android)

[pavel-roj]

Description

When opening the Modal by settings its visibility to true the modal's children are rendered in the top left corner for the first few frames before the children snap to the correct position.

The issue appeared after upgrading our project to the newest version of react-native with newArch enabled. The issue was not present when testing the same project under the older version from which we were updating which was react-native: 0.73.3.

Steps to reproduce

1. Open the provided expo snack
2. Select "Android" (the issue is not visible in the web version)
3. Click the "SHOW MODAL" button
4. The red box with the text is rendered in the top left corner for the first few frames, after that it is rerendered in the correct position (the center of the screen)

Since Expo Snack tends to be a bit laggy and shown to the user at a lower FPS on Android, the issue might not be immediately noticeable—it could take a few tries to see the problem properly. I've also included a video from my physical device where the issue is clearly visible.

React Native Version

0.78.2

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: Linux 6.11 Fedora Linux 39 (Workstation Edition)
  CPU: (12) x64 AMD Ryzen 5 7535U with Radeon Graphics
  Memory: 4.17 GB / 13.33 GB
  Shell:
    version: 5.2.26
    path: /bin/bash
Binaries:
  Node:
    version: 22.14.0
    path: ~/.nvm/versions/node/v22.14.0/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/bin/yarn
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.14.0/bin/npm
  Watchman:
    version: 20231008.002904.0
    path: /usr/local/bin/watchman
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java:
    version: 17.0.9
    path: /home/pavelroj/.sdkman/candidates/java/current/bin/javac
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.78.2
    wanted: 0.78.2
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

No logs are needed since the issue doesn't cause a crash.

Reproducer

https://snack.expo.dev/@pavelroj/rn-modal-flicker-bug?platform=android

Screenshots and Videos

The issue reproduced on a physical device

rn-flicker-bug.mp4

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.78.2. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[pavel-roj]

Updated to 0.78.2 - the issue still persists

[devanshsaini11]

Hi @pavel-roj I cannot see modal in snack you have shared, if you have missed adding it by mistake can u please update it and share the link again so that issue can be validated quickly

[pavel-roj]

@devanshsaini11 My bad, it seems I didn't save it properly. Can you try now? (the link - https://snack.expo.dev/@pavelroj/rn-modal-flicker-bug?platform=android - is same)

[Mako-L]

Same problem here. Using "react-native": "0.76.7". Any idea on how to fix this?