[Performance] Why this animation is so slow compared to web?

[arasrezaei]

Description

This GridMagnification animation is performing really slow on native, specially on low level android phone, i've tested it with expo go sdk 48 on a samsung note 4 with the provided snack example. the surprising thing is that when i run the web version of this animation with this old phone it's so smooth and interact well!

the react native version of this animation has been coded by: Aashu-Dubey

Steps to reproduce

open snack url and interact with animation.

test the web version and native version and compare them.

Snack or a link to a repository

https://snack.expo.dev/@arasrezaie/slow-reanimated-grid

Reanimated version

2.9.1

React Native version

0.70.5

Platforms

Android, Web

JavaScript runtime

Hermes

Workflow

Expo Go

Architecture

Paper (Old Architecture)

Build type

Release mode

Device

Real device

Device model

Samsung Galaxy note 4

Acknowledgements

Yes

[arasrezaei]

Same phone, same code:

https://github.com/software-mansion/react-native-reanimated/assets/36116677/bdebe480-e955-48ff-8ddf-f2ae8c60c32e

https://github.com/software-mansion/react-native-reanimated/assets/36116677/0ca8285c-cb8e-410c-92f5-e735e0286042

[arasrezaei]

Phone: samsung galaxy note 4 , android 11, custom room

[kacperkapusciak]

Hi @arasrezaei 👋

Reanimated in version 2.9.1 is a pretty old version of Reanimated.

Could you upgrade your project to use the newest React Native Reanimated v3.5.1 (if you use Reanimated 2 API there are no breaking changes) and check if it helps?

Cheers

[arasrezaei]

Released version. bare react native 0.72.4 reanimated 3.5.1:

https://github.com/software-mansion/react-native-reanimated/assets/36116677/fc517821-7f8c-4a6e-b673-b077ff5eb5bd

Better than previous versions, but still laging and slower than web version

[arasrezaei]

I've just compiled the app with fabric enabled and it was 5x slower than old arch

[hirbod]

You can optimize the performance by a big magnitude when using appropriate image sizes. You're using 256x256 sized images, even when the computed size is 20x20. Try using 60x60 or 80x80 max or use expo-image (because that actually downscales the images) - this should help a lot with performance.

I did not measure, but try this version

[patrycjakalinska]

hi @arasrezaei, thanks for opening the issue, I've tested this example on latest v53 Expo app with Reanimated 3.17.5 and RN 0.79.3 on physical Pixel 4, and there was no lag present c: (the small stagger presented on video is related to mirroring, in real life here is no such thing)

Please upgrade to latest versions, and let me know if it helped!

https://github.com/user-attachments/assets/ad24e236-34a0-4d9f-be85-e35ab57a0102