Heavy Screens take too much time to load (White Screen lag).

[AjayFrancisTechversant]

Description

Navigating to a screen with heavy components take more time in new arch compared to old arch. I have Custom headers made with skia. I also have a long list made with Flashlist which make it more slower. I have made a dummy repo which can used to reproduce the issue.

Steps to reproduce

1. Clone the repo https://github.com/AjayFrancisTechversant/NewArchdummy.
2. Run the project and click on 'go to lists' button.
3. Notice the lag.

React Native Version

0.78.0

Affected Platforms

Runtime - Android, Runtime - iOS

Areas

Fabric - The New Renderer, TurboModule - The New Native Module System, Bridgeless - The New Initialization Flow

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

System:
  OS: macOS 15.2
  CPU: (8) arm64 Apple M2
  Memory: 118.67 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.7.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2025.02.17.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.13016713
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
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.0
    wanted: 0.78.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

No crash

Reproducer

https://github.com/AjayFrancisTechversant/NewArchdummy

Screenshots and Videos

Screen_Recording_20250317-152828_NewArchdummy.mp4

[Sushant-Sardeshpande]

I can understand having something like this just to test performance but not otherwise.
I've generally seen that V8 runs somewhat faster than Hermes at least on Android - you can try that as well; iOS support for V8 is still experimental so that's your choice. In this case though it might be more to do with the image loading, you can try using react-native-fast-image.
Ideally though this is not something that would be realistic. While you can try the above options, you are better of using pagination in your lists and lazy load any additional required data - in which case scrolling through 100000 items would not be reasonable and you should add some kind of a filter criteria that helps users search for required items.

[AjayFrancisTechversant]

I'm referring to the white screen that appears during the transition between two screens when the second screen is too heavy. Ignore everything else, including delays caused by packages like Skia and FlashList. Furthermore, I have added a new screen with an EPUB reader from @epubjs-react-native/core, which makes the white screen issue more noticeable. I have also updated the sample repo and attached a screen recording of the issue.

Steps to reproduce:

1)Run this dummy repo.
2)Click on "Go to EpubReader".
3)Notice the white screen during navigation.

**Please ignore all other functionalities, as they are just placeholders. The focus should be solely on the white screen lag during screen-to-screen navigation.

whitescreenReproduce.mp4

[migueldaipre]

With so many community dependencies, it's hard to know if the problem is in the core of React Native. We should try to reduce the number of dependencies and isolate the problem.

[AjayFrancisTechversant]

With so many community dependencies, it's hard to know if the problem is in the core of React Native. We should try to reduce the number of dependencies and isolate the problem.

I faced this issue only when i migrated to new arch. It was working fine in old arch