Passing animated value to Path

[MaxRobertsDear]

Big fan of the Skia.Path.Make() api - makes building paths a breeze!
Curious whether it's possible to pass animated values to nodes of a path.

Status Quo

Skia already has the concept of passing animated values to components. E.g. (from docs)

import React, { useState } from "react";
import { Canvas, Rect, useSpring } from "@shopify/react-native-skia";
import { Button, StyleSheet } from "react-native";
 
export const AnimationExample = () => {
  const [toggled, setToggled] = useState(false);
  const position = useSpring(toggled ? 100 : 0); <<here
  return (
    <>
      <Canvas style={{ flex: 1 }}>
        <Rect x={position} y={100} width={10} height={10} color={"red"} /> <<here
      </Canvas>
      <Button title="Toggle" onPress={() => setToggled((p) => !p)} />
    </>
  );
};

Aim << please answer this

How would you animate a path node? E.g. would like to do something like this (contrived example for simplicity)

import { Canvas,  useSpring, Skia, rrect, rect, Path } from '@shopify/react-native-skia';
import React, { useState } from 'react';
import { Button } from 'react-native';
 
const BORDER_RADIUS = 12;
const path = Skia.Path.Make();
export const AnimationExample = () => {
  const [toggled, setToggled] = useState(false);
  const position = useSpring(toggled ? 100 : 0); <<here 

  const roundedRectPath = rrect(
    rect(0, position, 120, 240), << here, I would like the `y` to animate as `position` changes
    BORDER_RADIUS,
    BORDER_RADIUS
  );
  path.addRRect(roundedRectPath);

  return (
    <>
      <Canvas style={{ flex: 1 }}>
        <Path path={path} color={'red'} />
      </Canvas>
      <Button title="Toggle" onPress={() => setToggled((p) => !p)} />
    </>
  );
};

Thanks to how well typed the lib is, intellisense warns me that rect() only accepts numbers, not animated numbers. Any workarounds here?

Workaround that (almost) works << Can ignore - was trying possible solutions before bothering people

import { Canvas, useSpring, Skia, rrect, rect, Path, Selector} from '@shopify/react-native-skia';
import React, { useState } from 'react';
import { Button } from 'react-native';

const BORDER_RADIUS = 12;
const path = Skia.Path.Make();
export const AnimationExample = () => {
  const [toggled, setToggled] = useState(false);
  const position = useSpring(toggled ? 100 : 0); <<here

  return (
    <>
      <Canvas style={{ flex: 1 }}>
        <Path
          path={Selector(position, position =>
            path.addRRect(
              rrect(rect(0, position, 120, 240), BORDER_RADIUS, BORDER_RADIUS) <<here
            )
          )}
          color={'red'}
        />
      </Canvas>
      <Button title="Toggle" onPress={() => setToggled(p => !p)} />
    </>
  );
};

The above code seems to update the height rather than the y. This can be inferred because replacing that above path with

 path={Selector(position, position =>
    path.addRRect(
      rrect(rect(0, position, 120, 240 - position), BORDER_RADIUS, BORDER_RADIUS) <<here
    )
  )}

results in the Path not updating at all
result of workaround that almost works ...

[wcandillon]

Here is an example of an animated path:

  const path = useComputedValue(() => {
    const C1 = C + A * n1.noise2D(clock.current / F, 0);
    const C2 = C + A * n2.noise2D(clock.current / F, 0);
    const C3 = C + A * n3.noise2D(clock.current / F, 0);
    const C4 = C + A * n4.noise2D(clock.current / F, 0);
    const p = Skia.Path.Make();
    p.moveTo(c.x, c.y - r);
    p.cubicTo(c.x + C1 * r, c.y - r, c.x + r, c.y - C1 * r, c.x + r, c.y);
    p.cubicTo(c.x + r, c.y + C2 * r, c.x + C2 * r, c.y + r, c.x, c.y + r);
    p.cubicTo(c.x - C3 * r, c.y + r, c.x - r, c.y + C3 * r, c.x - r, c.y);
    p.cubicTo(c.x - r, c.y - C4 * r, c.x - C4 * r, c.y - r, c.x, c.y - r);
    const m = Skia.Matrix();
    m.translate(c.x, c.y);
    m.rotate(clock.current / 2000);
    m.translate(-c.x, -c.y);
    p.transform(m);
    return p;
  }, [clock]);

[MaxRobertsDear]

my hero ❤️

[MaxRobertsDear]

@wcandillon (and anyone who happens to stumble upon this thread), interestingly, the above "Workaround" solution yields the same result.

Seems that it's important that the Skia.Path.Make() reference is instantiated within the Selector() or useComputedValue() (I noticed that this was a difference in your example 😆)

i.e.

const path = Selector(cy, cy => {
    const p = Skia.Path.Make();

    return p.addRRect(
      rrect(
        rect(
          coords.x,
          coords.y + cy,
          coords.width,
          coords.height
        ),
        BORDER_RADIUS,
        BORDER_RADIUS
      )
    );
  });

[wcandillon]

We recommend you use useComputedValue here. I see how we might have created some confusion here (cc @chrfalch).

[neiker]

Update 2025:
useComputedValue has been deprecated, use useDerivedValue from Reanimated instead:

const path = useDerivedValue(() => {
    const p = Skia.Path.Make();

    // ...

    return p;
  }, []);