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 almost 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.

I am creating this issue here, originally reported on the RN Gesture Handler. In addition to the original description, based on the @m-bert test, even withDecay is not entirely smooth, though the difference is significant. The issue is strictly tied to the New Architecture, where, aside from this problem. I am experiencing significantly reduced animation performance throughout the app (likely due to re-renders) — I use React Navigation . Screen transitions are not smooth, and there are cases where, during transitions like fade-in, the original screen briefly flickers, interrupting the fade for a short moment. I think it is related to this issue.

In the repro steps repository, heavy re-renders are intentionally included to make the issue visible. On the old architecture, it is completely smooth even with heavy re-renders.

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

Gesture Handler version
2.22.0

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

Reanimated version

3.16.7

React Native version

0.76.6

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Release app & dev bundle

Device

Real device

Device model

Samsung Galaxy A14, Emulator

Acknowledgements

Yes