Perf issues on android with Expo sdk 53

[pierrezimmermannbam]

Description

A simple looping animation (a transform applied to a view through useAnimatedStyle) is very costly in terms of CPU. I tested to perform such animation in a fresh expo sdk 53 app and measured performance using flashlight and a Huawei P40 lite. Bellow is the result I get. I tested both with expo go and a dev client and got similar results

On the real application I'm currently working on basic animations can make our FPS drop to 45 and cause continuous high CPU usage. The issues we're experiencing happen as well in release mode.

Steps to reproduce

I made a repo with the expo app I used https://github.com/pierrezimmermannbam/reanimated-perf-issue Clone the repo, launch the app in expo go on an android device and measure using flashlight measure

Snack or a link to a repository

https://github.com/pierrezimmermannbam/reanimated-perf-issue

Reanimated version

3.17.4

React Native version

0.79.2

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo Go

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

No response

Host machine

macOS

Device model

Huawei P40 lite

Acknowledgements

Yes

[nshelia]

Same. Laggy animations after upgrading to SDK 53 with just useAnimatedStyle, opacity, transform animations. New arch

"expo": 53.0.7
"react-native-reanimated": "^3.17.5",
"react-native": "^0.79.2",

[tomekzaw]

Thanks @pierrezimmermannbam and @nshelia for reporting this.

Do you think this is caused solely by Expo SDK 53 upgrade or rather by enabling the New Architecture.

Could you please check if the problem persists when you (temporarily) disable the new architecture?

[pierrezimmermannbam]

The issue is not strictly related to expo sdk 53, I have also experienced it on expo 52. I tried with new arch disabled, results are slightly better but still not great

Here is what I get if I just remove the animated view from the screen

If I render 6 times the animated view it is just slightly worse than with a single one

With new arch enabled and 6 animated views rendered:

With new arch and no animated view

[riamon-v]

I think this issue might also be related to #7435

Looking forward to this, having the same problems here in my app with nothing really fancy happening

[marcel-happyfloat]

Yeah, I'm not sure where the problem is exactly (since I have been building a completely new app version over the last 2 years) but the performance is 10x worse now on Android and I'm not able to release because of this. iOS is fine as always.

Maybe also related to: https://github.com/software-mansion/react-native-reanimated/issues/7480

EDIT: I was able to improve the performance somewhat (was mostly related to FlashList v2 and Skia - using standard FlatList on old android devices now and using the new filter property on View and react-native-svg instead of some Skia canvas for similar features.). Still it's not as fast as the old version, especially my scrollHandler and animated header with reanimated.

[jamonholmgren]

I cloned down @pierrezimmermannbam's repo and ran it on my Samsung S22.

Left = No AnimatedView, average CPU was under 10% Right = with AnimatedView, average CPU was over 70%

I then ran it with 10 AnimatedViews, and CPU usage went up even more.

[dule-vikki]

🤔

[m-asad-mumtaz]

I'm facing the same performance issue after upgrading the app to expo SDK53. I'm using Animation for stories and tab navigation in my app. If anyone knows the solution please help me.

[florian-deroo]

Same performance issue

[genesiscz]

Also related #7460

[trentcowden]

Chiming in here--updating to expo 53 and reanimated 2.17 while opting out of the new architecture made our android app basically unusable as we make heavy use of reanimated across our app. Something as simple as making an audio skip forward button 'spin' on press is causing a whole second lag. Definitely interested in these performance issues being fixed!

[2Senn]

any interpolate animations we have after upgrading to expo sdk 53 and enabling new arch now lag significantly. It is basically unusable. Both on IOS and Android

[Opus26]

We are also experiencing major performance issues on Android since Expo 53, even with react-native-reanimated V4. The impact is significant enough to prevent us from going into production with the new architecture.

• "expo": "53.0.19",
• "react-native-reanimated": "^4.0.0",

[tomekzaw]

@Opus26 Could you please specify what exactly do you mean by "major performance issues"? The more general the problem description is, the less we can do to help you.

[tomekzaw]

Hi all, if you're experiencing performance regressions of animations after enabling the New Architecture, please make sure to check out this page we recently added in Reanimated docs:

• ℹ️ Reanimated docs: Performance regressions on the New Architecture