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

[AjayFrancisTechversant]

For reference, I have attached a screen recording of the same issue in my feature Project. Just look the time taken to render the second screen. This ruins the whole user experience. Please provide any solution asap as I'm Stuck here. Everything worked fine in old arch, I'm facing this issue only when I migrated to newArch

Screen_Recording_WhiteScreen.mp4

[cortinico]

I believe what you're seeing could be due to our debug build. If you check in release the issue is not happening:

video-1742395228.mp4

Also I've tried to build your app with Old Arch but it doesn't compile.

As @migueldaipre pointed out, there are too many 3rd party deps, it's extremely hard for us to give you any support.

[AjayFrancisTechversant]

I believe what you're seeing could be due to our debug build. If you check in release the issue is not happening:

video-1742395228.mp4
Also I've tried to build your app with Old Arch but it doesn't compile.

As @migueldaipre pointed out, there are too many 3rd party deps, it's extremely hard for us to give you any support.

You might encounter some compilation errors since I am using the latest versions of third-party dependencies in this dummy repo, which might not support the old architecture in React Native v0.78. Initially, In my feature project, I was using all these third-party dependencies with the same functionality in React Native v0.76, but with the old architecture. The moment I migrated to the new architecture (still on RN v0.76), the white screen issue started. So, I don't think it's caused by having too many third-party dependencies—the new architecture introduced these issues. All the screen recordings mentioned (navigation to EpubReader by clicking "Go to EpubReader" and the screen recording of my feature project) are reproduced in the release build as well.

[cortinico]

All the screen recordings mentioned (navigation to EpubReader by clicking "Go to EpubReader" and the screen recording of my feature project) are reproduced in the release build as well.

mmm I'm not really able to reproduce them on the release build I attached on video though

[AjayFrancisTechversant]

All the screen recordings mentioned (navigation to EpubReader by clicking "Go to EpubReader" and the screen recording of my feature project) are reproduced in the release build as well.

mmm I'm not really able to reproduce them on the release build I attached on video though

Its reproduced in release build also. In your attached recording, you are clicking on "go to lists" button, try clicking on "Go to EpubReader".