[Android] animation is really slow after upgrade to 0.76.2

[nazacity]

Description

new arch enabled animation is really slow weird please see video below it looks like it take many cpu to run animation

https://github.com/user-attachments/assets/4a5bdece-6814-4837-99c9-2238a2697894

new arch disabled animation is working fine

https://github.com/user-attachments/assets/f0284a20-f487-4c96-b16c-1fa8e8fe3b24

Steps to reproduce

Snack or a link to a repository

Reanimated version

3.16.1

React Native version

0.76.2

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Steps to reproduce and Snack or a link to a repository sections.

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[doublelam]

it seems that rendering/setState will affect the animation, so when the animation starts you need to avoid setState or change props. (it happens only under New Architecture)

[nazacity]

it seems that rendering/setState will affect the animation, so when the animation starts you need to avoid setState or change props. (it happens only under New Architecture)

Will it be fixed

[tjzel]

Hi @nazacity, I'm afraid that without a minimal reproduction we can't investigate that. Please provide one.

[nazacity]

Hi @nazacity, I'm afraid that without a minimal reproduction we can't investigate that. Please provide one.

I'll try to create reproduction one

[mimo-10]

Will u create a reproduction, because it is a Serious problem, if you can't or u don't going, tell me I will reproduce it be cause it happens to me, for my case: fps in the old arch in the worst case gets 54 , in the new arch i could push it the 3 fps, (same reanimated implementation)

[nazacity]

Will u create a reproduction, because it is a Serious problem, if you can't or u don't going, tell me I will reproduce it be cause it happens to me, for my case: fps in the old arch in the worst case gets 54 , in the new arch i could push it the 3 fps, (same reanimated implementation)

I'm trying but i'm still not abled to reproduce it. Could u please help

[mimo-10]

Yes I will tomorrow morning, sorry I didn’t noticed that u responded. Beside that could I ask u, did u tried on iOS does it work normally their ¿ also you could send me a video with performance monitor on ? And thank u so much

[nazacity]

Yes I will tomorrow morning, sorry I didn’t noticed that u responded. Beside that could I ask u, did u tried on iOS does it work normally their ¿ also you could send me a video with performance monitor on ? And thank u so much

updated to 3.17.0-rc.1 still not fixed

[freeboub]

I also confirm the 3.17.0-rc.1 is really better in my project !

[pleerock]

I can confirm, 3.17.0-rc.1 doesn't solve the performance degradation issue appeared after latest 0.76 upgrade.

[JeanSilvany]

I have same problem in Android and iOS with de new Arch.

[mimo-10]

anything new, performance is really bad

[mimo-10]

Hi @nazacity, I'm afraid that without a minimal reproduction we can't investigate that. Please provide one.

This problem is happing any all android phone, no need for reproduction, please fix this i been 3 month, we cannot go on production like this, also we cannot revert because any deps used is supporting only the new arch

[tomekzaw]

Please upgrade to recent React Native version first.

If this doesn't help, provide a reproducible example so we can investigate it.

[mimo-10]

which version version 0.78 ? or 0.79 ? if 0.78 i upgraded and it does not work, same issue, for the reproduction we dont need that because it happens on any animation, just put some animated element in one screen and u will notice it directly, apps is not usable at all like that, if u really need one i could try to produce and example, but as i told this issue is after the upgrade to 0.76 new arch thank u again

[mimo-10]

but please help, cuase is is a universel issue, it is effecting as a lot we have a deadline to finish the project and we are running out of time. anyway have a nice day

[genesiscz]

Also related #7460

[e-younan]

Please upgrade to recent React Native version first.

If this doesn't help, provide a reproducible example so we can investigate it.

Adding to this as there are several related issues open - I upgraded to 0.79.2 and enabled the new architecture on our codebase and I am seeing the same performance drops on iOS. Here is a simple component:

export const BlurredSurface: React.FC<SurfaceComponentProps> = ({ showNavBar: opacity }) => {
  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }), []);
  return (
    <Animated.View style={[StyleSheet.absoluteFill, animatedStyle]}>
      <BlurView style={StyleSheet.absoluteFill} tint="dark" intensity={IS_ANDROID ? 100 : 50} />
    </Animated.View>
  );
};

This is a fairly trivial component but I am seeing major performance issues when the opacity changes. Here is a video of it with the animation:

https://github.com/user-attachments/assets/f270b505-6fb8-44be-9104-abb2607b4de8

And for this component (without the useAnimatedStyle hook and Animated.View):

export const BlurredSurface: React.FC<SurfaceComponentProps> = () => {
  return <BlurView style={StyleSheet.absoluteFill} tint="dark" intensity={IS_ANDROID ? 100 : 50} />;
};

I don't see any issues with performance:

https://github.com/user-attachments/assets/42eb2ff8-5ef3-4302-95b2-0531ce7c8fe6

Is this a known issue with the new architecture? It seems like a simple useAnimatedStyle hook with an opacity animation is causing major performance issues for me now. Here is the matrix of versions I have installed:

{
    ...
    "react-native": "0.79.2",
    "react-native-reanimated": "~3.17.4"
    ...
}

[mimo-10]

I would like to highlight something that could help , in android the frame rate of the ui and us thread is synced meaning it is the same.

[leungtinyau27m5]

enabled new arch with react-native-reanimated, refresh rate significantly dropped

{
    ...
    "react-native": "0.76.9",
    "react-native-reanimated": "~3.17.5",
    "expo": "~52.0.46"
    ...
}

[genesiscz]

@e-younan can you maybe try instructions in https://github.com/software-mansion/react-native-reanimated/issues/7460#issuecomment-2939474567 where @tomekzaw kindly gave me a way to try to resolve that? Of course RNR should go to 4.0.0-betaXX

Maybe Tomek will have better chance here :-)

[roo12312]

Facing the same issue especially on a lower-mid range android phones

[KolissnikBogdan]

Hi, any update?

[duongdinh98]

FPS still drop in "react-native": "0.79.4"

[mimo-10]

Yes even with reanimated v4

[vorn-dev-ni]

Yes same issue react native 0.78 both ios and android

[mimo-10]

I can confirm 0.79.5 also has this issue

[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