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

[mimo-10]

I have the same problem, reanimated team keeps ignoring this. There is also an issue created for that, they just close it like nothing is going on.

[alexkuttig]

Hi @mimo-10, we currently switched back to the old architecture, but prepare for switching to the new one. Since Reanimated still does not work for this use case, we switched to the Animated API for this kind of animation. Reanimated does work fine for all other Animations in our application, it's just the ones triggered by scroll. Maybe this can be a solution for you, too.
We'll investigate Reanimated for this purpose from time to time, so I'll keep you posted here about our results.

[mimo-10]

Thank u so much @alexkuttig , appreciate it.