Performance Issues with large applications?

[alexkuttig]

Hi,

First of all - thanks for the great framework. I really like it and appreciate your contribution to the React Native ecosystem.

I have a question regarding Reanimated performance in large apps.

I created a simple animation, which changes the style of my page header, consisting of an image and a text, based on a scroll view offset. I use a sharedValue and an animatedScrollHandler for the animation. The animation does not trigger anything else like state updates or other animations.

This works fine when using in a single screen. But when using in our real world app, it starts to drop frames (UI and JS thread). Basically, the more screens are mounted, the slower the animation gets. It happens in release and dev mode and mainly on android. When I create the same animation with React Native's built in Animated API, this problem doesn't occur. It works stable at 60fps.

We are using the new architecture in our app and all examples here.

So my question is: Is there anything which can slow down reanimated when having a large apps (large Component Tree, many other animations, even if not running)? Is there anything we have to avoid, to prevent Reanimated from slowing down?

We use React Navigation in our app and I already tried to use enableFreeze().

I would be super thankful for an answer and any tips/hints what could cause this performance problems with Reanimated.

[alexkuttig]

Hi again,

I tested the same setup with React Native 0.76 and Reanimated 3.16.1. It works smooth on the old architecture, but not on the new architecture. React Native's built in Animated API works stable at 60fps on old and new architecture.

Best,
Alex

[genesiscz]

@ConorLindsay94 As you mentioned my issue in #7460, team already mentioned what is happening and that the RN is kinda at fault there. I can also say that on iOS this started getting much worse too, as seen on this xCode regression graph:

[tomekzaw]

@alexkuttig No worries, thanks. There's several scroll-related issues happening at once. We need to see the actual behavior (and the exact versions of React Native and Reanimated, which you have already provided) so we can tell you which one it is and what you can do to fix it. Or, alternatively, you can wait

@ConorLindsay94 Again, the term "scroll issues" isn't really helpful since this can mean various bugs. Also, I suspect it's not related to performance itself. By "performance", we mean the ability of Reanimated to animate multiple views at once and the actual number of FPS. It is likely that if you're facing "scroll issues", the app might still run on 60/120 fps but there can be some delay which causes the views to appear "laggy". Turns out, these two (namely "scroll issues" and "performance") are the current blockers of stable v4 and together with @bartlomiejbloniarz we're actively working on getting it fixed but we still have some other commitments like hosting App.js Conf 2025 last week. Please expect some updates on "scrolling issues" in the following days, but just so you know, it's likely that it's root cause is in react-native itself rather than Reanimated which makes things more tricky for all of us. As for FlashList, have you tried the new v2 version (@shopify/flash-list@2.0.0-rc.2)?

[mimo-10]

Please check #6710 for a video that show that, please check it : )

[mimo-10]

Hello any updates !? , at least tell us if u guys are working on this, this very very critical; (

[mimo-10]

btw, based oon you definition it is a performance issue, when i scroll especialy when i'm inside a page outside the man stack, fps is around 3 to 5 fps when an animation is triggered, with scrolling, thank u