Stuttering Animations with withDecay in Newer Versions of Skia

[petrikjan]

Description

I encountered an issue in newer versions of Skia. When using withDecay, the animation stutters. In Skia version 1.9.0, everything worked fine on both the New and Old React architecture. Touch-based scrolling without withDecay seems to work without issues. The versions of Reanimated and Gesture Handler have no impact on this.

I'm using Gesture.Pan() for scrolling, and withDecay is applied in onEnd. The movement is handled through Group transform using useDerivedValue. There is a fairly heavy computation and state changes happening in the component during scrolling, but as I said, it worked perfectly smoothly with the older Skia version.

React Native Skia Version

v2.0.0-next.1

React Native Version

0.78

Using New Architecture

• Enabled

Steps to Reproduce

Create PAN gesture handler
Apply transform to Skia Group

Snack, Code Example, Screenshot, or Link to Repository

Simplified Code Selection:

const translateX = useSharedValue(0);
const translateY = useSharedValue(0);

  const panGesture = Gesture.Pan()
    .onUpdate((event) => {
      translateX.set(event.translationX);
      translateY.set(event.translationY);
    })
    .onEnd((event) => {
      translateX.set(withDecay({
        velocity: event.velocityX,
      }));
      translateY.set(withDecay({
        velocity: event.velocityY,
      }));
    });

const transform = useDerivedValue(() => [
    { translateX: translateX.value },
    { translateY: translateY.value },
  ]);

<Canvas>
 <Group transform={transform}>
  //content 
 </Group>
</Canvas>

SkiaStuttering.mov