React Native Skia janky sync with reanimated values (useSharedValueEffect())

[MaxRobertsDear]

Goal

Synchronise the translateY of a skia <Group /> object with the events driven by gesture handler.

Mental Modal

Two layers absolutely positioned on top of each other. Bottom Layer is the skia <Canvas />and top layer is an <Animated.View /> driven by <GestureDetector />. Why? Leveraging skia for its beautiful 2d graphics to achieve a glassmorphic design and overlaying this with <Pressable /> content.

Code

const Example = () => {
  const image = useImage(require("../assets/dark-background.png"));

  const reanimatedY = useSharedValue(0);
  const skiaY = useValue(0);

  const panHandler = Gesture.Pan().onUpdate((event) => {
    reanimatedY.value = event.translationY;
  });

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateY: reanimatedY.value }],
  }));

  // sync skia val with reanimated val
  useSharedValueEffect(() => {
    skiaY.current = reanimatedY.value;
  }, reanimatedY);

  // translate Y of skia Group based on skiaY
  const transform = useComputedValue(
    () => [{ translateY: skiaY.current }],
    [skiaY]
  );

  const backDropBlurClipPath = Skia.Path.Make();
  backDropBlurClipPath.addRRect(cardB);
  backDropBlurClipPath.addRRect(cardC);

  return image ? (
    <>
      <Canvas>
        <BackgroundImage />
        <Group transform={transform}>
          <BackdropBlur blur={20} clip={backDropBlurClipPath}>
            <Fill color={"rgba(255, 255, 255, 0.3)"} />
          </BackdropBlur>
        </Group>
      </Canvas>
      <GestureDetector gesture={panHandler}>
        <Animated.View style={animatedStyles}>
          <Content />
        </Animated.View>
      </GestureDetector>
    </>
  ) : null;
};

Problem

Whilst the above code successfully synchronises the skiaY to reanimatedY, there's some janky behaviour when moving the gesture quickly: the translateY of the <Canvas /> layer can be observed in falling out of sync with the <Animated.View /> layer (see Preview below). There appears to be a delay in updating the skiaY.

Is there something wrong with my implementation? Note that the same behaviour is observable when the animations are driven by onScroll of <ScrollView /> instead of <GestureDetector /> too.

Sync between skia and reanimated values inspired by the skia docs.

Mental model of layers inspired by the skia examples

My intuition is that the useSharedValueEffect() finds it challenging to update skiaY when the reanimatedY changes frequently in a short period of time. Happy to be told why I'm wrong!

Reproducible example

https://github.com/MaxRobertsDear/Glassmorphism

Preview

Notice how for the top card (with "Some Title" and "Some description"), the content fall out of sync with the background. It works smoothly if the gesture is slow.

[wcandillon]

It's possible that, indeed useSharedValueEffect is the bottleneck here. We're currently working on UI thread rendering and after that will look at ways to integrate with RE2 in a way that doesn't involve the JS thread.

Just to be on the safe side, moving the backDropBlurClipPath out of the render method doesn't change anything? (in case you have some extra render).
In general clipping operations are expensive, I'm wondering if you can reproduce the issue with a single Rect clip (no rounded corners).
It's definitely a use-case we want to monitor closely.

[MaxRobertsDear]

@wcandillon , thanks for taking the time to get back to me 🙂.

Took the backDropBlurClipPath out of the render method, used a single clip path and removed the rounded corners - unfortunately, couldn't observe any significant performance improvements. Not to worry - I can settle for wrapping the canvas in an animated view and moving the background relative to the cards for now.

Looking forward to playing with this on the UI thread 😆

Separate but related note:
I'm curious whether it will be possible in future to apply multiple <BackdropBlur /> components to a single <Canvas /> with varying <Fill /> colours and blurs?

Use case would be to achieve a stacked effect which mirrors the stacked notifications design that iOS has in the notification panel. E.g.

I'm not sure how this would be possible with the current api. Seems that you are limited to a single <BackdropBlur /> per Canvas due to the nature of the clip path. Am I wrong?
E.g.

  <BackdropBlur blur={20} clip={backDropBlurClipPath}>
    <Fill color={"rgba(255, 255, 255, 0.3)"} />
  </BackdropBlur>

[wcandillon]

You are not limited by the number of backdrop, just like clip or transforms, you should be able to stacks them