I'm trying to animate 200 views using Reanimated 2.10.0 and I noticed that the animation is not smooth when I'm implementing it with worklets while it never drops a frame when I'm implementing it as node-based animation. The two implementations are pretty similar, with a single time animated value that drives the animation for all the animated views.
Here are two screenshots of the iOS simulator with React Native's perf monitor:
Worklet (~42fps)
Node (~60fps)
I ran the same code on a low-end Android phone in release mode with fewers views and I noticed the same performance issue.
I understand that running worklets in their own JS VM is obviously slower than evaluating the result of a few animated nodes but I would not have expected such an impact on the performances. For now, I can fallback to the animated node version but I'm mostly worried that there will be no alternatives if Reanimated 3 drops support for animated nodes.
Description
I'm trying to animate 200 views using Reanimated 2.10.0 and I noticed that the animation is not smooth when I'm implementing it with worklets while it never drops a frame when I'm implementing it as node-based animation. The two implementations are pretty similar, with a single
time
animated value that drives the animation for all the animated views.I ran the same code on a low-end Android phone in release mode with fewers views and I noticed the same performance issue. I understand that running worklets in their own JS VM is obviously slower than evaluating the result of a few animated nodes but I would not have expected such an impact on the performances. For now, I can fallback to the animated node version but I'm mostly worried that there will be no alternatives if Reanimated 3 drops support for animated nodes.
Steps to reproduce
Here is the code for the worklet animation:
And its counterpart using animated nodes:
Snack or a link to a repository
https://github.com/simontreny/reanimated-perf-issue
Reanimated version
2.10.0
React Native version
0.69.5
Platforms
iOS
JavaScript runtime
JSC
Workflow
React Native (without Expo)
Architecture
Paper (Old Architecture)
Build type
Debug mode
Device
iOS simulator
Device model
Samsung Galaxy A5
Acknowledgements
Yes