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

[MarcusOhman91]

Have similar issues when new architecture is enabled, simply disabling new architecture removes the issue. I am also using useAnimatedStyles with translateX and translateY mapped to panning gestures.

I am seeing significant flickering in the initial moments of Pan gestures (not always, but often). Seems performance-related since I am experiencing more flickering on my older phone compared to my new phone (that is more performant).

In my scenario, I am only seeing flickering a single time per gesture movement, so after a flickering occurs I can keep the finger pressed and move around without receiving more flickering issues.

Let me know if you need footage or more details of my scenario.

NOTE: This is on android, did not test iOS

[mhoran]

NOTE: This is on android, did not test iOS

This particular issue does seem to be Android specific. I have run into other issues on iOS with flickering animations, but only Android seems to have an issue when updating a shared value from a gesture handler. Using a drawer component, the translateX of the drawer / content view accurately tracks finger position on iOS, but stutters on Android.

[mhoran]

Applying #7014 on top of 4.0.0-beta.2 resolves this issue for me.