PAN Gesture Causes Lag During Movement on New Architecture on Android

[petrikjan]

Description

Consider a scroll implemented using Gesture Handler and Reanimated. When performing a PAN gesture (moving a finger across the display) in combination with useAnimatedStyle and transform.translateY, the movement of the element experiences significant lag if some expensive renders are happening in the component. This is likely a bug because, when using withDecay and the finger is no longer on the display, the animation is completely smooth. This issue occurs only on Android with the New Architecture both on the simulator and a real device, in both production and debug builds.

Finger scroll:

Zaznam.obrazovky.2025-01-12.v.3.30.48-1.mov

withDecay scroll:

Zaznam.obrazovky.2025-01-12.v.3.31.52-1.mov

Steps to reproduce

Try scrolling with decay – smooth animation after lifting the finger.
Try scrolling with the finger on the display without using decay – noticeable lag.

Snack or a link to a repository

https://github.com/petrikjan/pan-bug

Gesture Handler version

2.22.0

React Native version

0.76.6

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[m-bert]

Hi @petrikjan! Thanks for reporting this issue. It looks like a problem caused by Reanimated, not Gesture Handler itself. Also, after my tests I can say that withDecay is not perfectly smooth. We talked about it with @bartlomiejbloniarz who currently investigates Reanimated's performance. Our guess is that problem lies in frequent, heavy re-renders (in that repro setState is called every 300ms).

[petrikjan]

Hi, thank you very much for the verification. I will create the same issue on Reanimated. Frequent re-renders are for easier problem identification.