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

[wcandillon]

This looks very interesting, could provide the full standalone example? I will investigate it immediately.

[petrikjan]

Hi, I’ll prepare a repository with the full code. The behavior is really strange. If you haven’t seen it yet, check out the discussion here: #3089
Thank you!!!

[petrikjan]

Hi @wcandillon , I created two repositories with the same code but different versions of React Native and Skia. The legacy version uses Skia 1.9.0 and React Native 75 (old architecture). The other version uses the latest versions and the new architecture – however, the issue is the same even with the old architecture. Sorry for the lack of typing and the messy code, it was pulled from a complex project and I wanted to get it to you as quickly as possible. I'm also attaching videos that show what’s happening and that the legacy version runs great.

https://github.com/petrikjan/skia-grid
https://github.com/petrikjan/skia-grid-legacy

[wcandillon]

@petrikjan I have to thank you for this example. I really actually quite small already. Is there any chance you could make it even smaller? for instance not using the paragraph API and showing squares instead shows the same issue. It would be good to try to make it as small as possible. I might spend some time to investigate it but anything you can do to this example to make it smaller (and you are not so far away from right now) would be tremendously helpful.

Now we do have examples where updates run both on the UI and JS thread simultaneous and and they run completely fine, not sure what is the different with your example yet but I will have a look.

[petrikjan]

Hi @wcandillon, Thank you! I removed most of the unnecessary stuff – last commit in skiaGrid. Is this okay like this? Anyway, the issue is still happening. You can try commenting out useAnimatedReaction. It won't actually fix it, but it will stop rendering new cells and rows, and then scrolling is mostly fine – probably because the content of memoized things isn't changing.

[petrikjan]

Hi @wcandillon, please, did you manage to find out anything?