facebook
After enabling Fabric, the animation becomes very stuttery.
Description
Hello, our application has many scenarios using react-native, with over 10 million daily active users. We are currently using react-native version 0.70.6 in production, and everything is working fine except for not having enabled Fabric. In fact, to use Fabric, we have already solved many problems. However, there is one animation issue that has been holding us back. We have a scenario that may have hundreds of labels, and when using Fabric, the animation becomes choppy when switching tabs, but it is very smooth when using RCTRootView.
We also tried to explore the differences between the two and found that it may be under the Fabric architecture, a large number of component re-layouts are triggered, which takes a lot of time and causes frame drops, while RCTRootView does not.
We also tried using the current version (0.73.0-rc.3) and found that the problem still exists.
We provided two animated gifs, the first one is using Fabric, and the second one is using Legacy.
React Native Version
0.73.0-rc.3
Output of npx react-native info
System: OS: macOS 12.6 CPU: (10) arm64 Apple M1 Max Memory: 473.53 MB / 64.00 GB Shell: version: 5.8.1 path: /bin/zsh Binaries: Node: version: 18.18.2 path: /opt/homebrew/bin/node Yarn: version: 1.22.19 path: /opt/homebrew/bin/yarn npm: version: 9.8.1 path: /opt/homebrew/bin/npm Watchman: version: 2023.03.13.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.14.1 path: /Users/xzh/.rvm/gems/ruby-2.7.5/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 22.1 - iOS 16.1 - macOS 13.0 - tvOS 16.1 - watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: Not Found Xcode: version: 14.1/14B47b path: /usr/bin/xcodebuild Languages: Java: Not Found Ruby: version: 2.7.5 path: /Users/xzh/.rvm/rubies/ruby-2.7.5/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.73.0-rc.3 wanted: 0.73.0-rc.3 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: true
Steps to reproduce
I provided a reproducible demo:https://github.com/GeniusBrother/RN730-demo
1.Execute 'npm install' in the project's root directory 2.Execute 'npm start' in the project's root directory 3.Execute 'USE_FABRIC=1 RCT_NEW_ARCH_ENABLED=1 PRODUCTION=1 pod update' in the ios directory 4.Open the 'RN730.xcworkspace' file in the ios directory and run the iOS project.
Snack, code example, screenshot, or link to a repository
https://github.com/GeniusBrother/RN730-demo
Hello @GeniusBrother,
thank you for preparing repro.
From the gif, I have a hard time understanding which animations is slow. There are two animations happening:
- Animating a full screen of text horizontally.
- Animating the tab highlighter (narrow view that highlights which tab is selected.
Which one of these is dropping frames?
I tried your repro app, but I don't see difference between Fabric and legacy. Few things:
- I noticed the animations are not using
useNativeDriver. For better performance, I would recommend using it. - Try setting this flag to true, does it improve things? if yes, this is something we are aware of and have a fix that is being rolled out.
Thank you for taking the time to help me solve the problem. @sammy-SC The main issue is that the tab animation is dropping frames and jumping back and forth when switching tabs.I have provided a new video to demonstrate the issue of dropped frames in the animation.
About you two solutions: 1.We have also considered using 'useNativeDriver' to solve the animation frame dropping issue, but we have many animations implemented with JavaScript, and changing them would require a lot of work. Even some third-party libraries such as react-native-navigation experience frame dropping during transitions.
2.I tried setting the configuration option to true, but nothing changed.
https://github.com/facebook/react-native/assets/13958352/756767bd-a385-4a01-aad3-e768c5ee60cc
Hey @GeniusBrother,
I think I found it. Compile the app with optimisations or comment out this line of code. Let me know if this fixes the frame rate.
If it fixes the problem, you will not have the FPS drop in optimised build.
The problem is that in React Native, Fabric does some checks to make sure in memory representation of the UI is consistent. These checks are expensive and grow with the size of UI. I will consider removing them in the future as probably they provide limited value and the developer experience is not great.
Please re-open this issue if the problem still persists after commenting out #define RN_SHADOW_TREE_INTROSPECTION 1 or building optimised build.
Thanks again for taking the time to help me troubleshoot the issue! @sammy-SC The method you provided is effective, and the animation has become much smoother! However, there is still a slight jitter. I have provided a video and you can focus on "第2tab" and "第3tab".
By the way, we are currently using version 0.70.6 in our production environment because we have hundreds of RN applications, so we cannot upgrade to the latest version in a short period of time. Could you tell me how to migrate these animation optimization to version 0.70.6, such as providing me with a link to the code merge?
https://github.com/facebook/react-native/assets/13958352/5ac0ca82-7298-4c7c-902e-9c4e9501fd7f
By the way. i cannot re-open my issues if a repo collaborator closed them @sammy-SC
Hey @sammy-SC I've implemented the solution you suggested, but my app is crashing.
I'm running React Native version 0.72.6 and recently enabled the new architecture.
Since enabling it, I've experienced significant lag on both Android and iOS when switching between tabs or navigating to different screens. The user experience is noticeably less smooth, especially on Android.
After applying your recommended fix, I tried to rebuild and run the app, but it now crashes on Android. Do you have any suggestions for resolving this issue?
https://github.com/facebook/react-native/commit/51fd4188005cc3318fecc85b8090453c480af6e8 should resolve it.
it makes sure the expensive checks in the new architecture are disabled in open source builds of React Native.
@sammy-SC Thanks for your quick response. I appreciate it. The issue in my case was with Expo. I had been using Expo authentication in my app, which led me to use Expo's provided wrapper in my MainApplication.java. However, upon removing it and switching to the default one provided by React Native, the performance improved by 50% .Same goes for iOS.
Hey @sammy-SC I found that there is currently no status update for this issue. Are there any plans to fix this animation problem?
Hey @sammy-SC I found that there is currently no status update for this issue. Are there any plans to fix this animation problem?
The latest update on this is that the fix https://github.com/facebook/react-native/commit/51fd4188005cc3318fecc85b8090453c480af6e8 is going to land in 0.74
You can try the latest RC which contains the fix
I am facing a crash in android "Unable to find JSIModule for class UIManager" after enabling Fabric. any solution? RN version : 0.71
Hey @sammy-SC I found that there is currently no status update for this issue. Are there any plans to fix this animation problem?
The latest update on this is that the fix 51fd418 is going to land in 0.74
You can try the latest RC which contains the fix
can anyone confirm it is working?
Hey @lichstam,
what do you mean by confirming if it is working?
0.74 contains this commit. When looking into this issue, we found that this dev only check was causing the stutter. https://github.com/facebook/react-native/commit/51fd4188005cc3318fecc85b8090453c480af6e8 disabled the expensive check even in DEV. Are you still experiencing the issue? Are you experiencing the issue in release mode as well?
If that's the case, we need to take another look.
Thank you
I am facing a crash in android "Unable to find JSIModule for class UIManager" after enabling Fabric. any solution? RN version : 0.71
this seems like a different issue. Do you mind creating a new issue with repro steps?
Thank you
Please reopen if the problem still persists even with https://github.com/facebook/react-native/commit/51fd4188005cc3318fecc85b8090453c480af6e8
Hey @lichstam,
what do you mean by confirming if it is working?
0.74 contains this commit. When looking into this issue, we found that this dev only check was causing the stutter. 51fd418 disabled the expensive check even in DEV. Are you still experiencing the issue? Are you experiencing the issue in release mode as well?
If that's the case, we need to take another look.
Thank you
it's basically described here
https://github.com/software-mansion/react-native-reanimated/issues/5671
since they switched to the fabric ui animations began to be choppy. i've tried the latest react native version (0.74.2) and can confirm they are still present.
it was introduced in the following commit (not very long)
https://github.com/software-mansion/react-native-reanimated/pull/4913/files
seems alright to me and since there are more people complaining about it there is good reason to believe that the problem originates from here and not from reanimated library