Closed
Description
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>