FitBox dst with AnimatedProp?

[ryanpwaldon]

Hey 👋

I'm trying to render an array of paths with <FitBox/> + <Path/>. I would use <ImageSVG/>, but I'm after dynamic color / opacity, so the <Path/> approach seems preferable. Is there a way to get something similar to this working?

const rects = useComputedValue(() => xPositions.current.map((v, i) => rect(v, 0, 12, 12)), [xPositions])

{array.map((index) => (
  <FitBox src={rect(0, 0, 12, 12)} dst={Select(rects, (v) => v[index])}>
    <Path
      path="M6.709 11.71A.967.967 0 0..."
      color={Select(...)}
      opacity={Select(...)}
    />
  </FitBox>
)}

I'm trying to render the arrows in this image:

Any chance FitBox dst could ever accept an AnimatedProp?

[wcandillon]

This looks good 😇😎
behind the scene, FitBox is simply using a function that you can wrap into a useComputedValue (or useDerivedValue is you use Reanimated): https://github.com/Shopify/react-native-skia/blob/main/package/src/renderer/components/shapes/FitBox.tsx#L22

Based on this snippet, I assume that you will be able to refactor your code accordingly?

[ryanpwaldon]

Perfect, easy! Thanks William :)

[cmkf01]

Hey all, I'm having a similar issue animating the dst prop of Fitbox and hoping for some advice. A useDerivedValue() as mentioned by William above doesn't seem to be triggering a re-render of the component and I'm not seeing any animation.

Here is a simple example: a RRect container and a plus icon (with a gesture handler overlay). A tap extends the height of the container but I want the plus sign to always remain at the bottom. The gesture handler animates down with the container, but the plus icon only moves on a re-render.

Things I have tried:

1. adding <Animated.View /> with useAnimatedStyle but I got an unexhaustive RCTView error;
2. wrapping fitbox() in useDerivedValue but got threading error that runOnJS(fitbox)() did not resolve;
3. using the transform prop of Group but without success.

const path1 = Skia.Path.Make();
path1.moveTo(12, 5);
path1.lineTo(12, 19);
path1.close();
const path2 = Skia.Path.Make();
path2.moveTo(5, 12);
path2.lineTo(19, 12);
path2.close();

const Slider = () => {
  const rectHeight = useSharedValue(100);
  const pathGroupY = useSharedValue(62.5);

  const srcRect = useSharedValue(rect(0, 0, 24, 24));
  const dstRect = useDerivedValue(() => {
    return rect(12.5, pathGroupY.value, 25, 25);
  });

  const handleTap = Gesture.Tap().onEnd(() => {
    rectHeight.value = withTiming(
      rectHeight.value + 50,
      { duration: 300 },
      () => {
        notifyChange(rectHeight);
      },
    );
    pathGroupY.value = withTiming(
      pathGroupY.value + 50,
      { duration: 300 },
      () => {
        notifyChange(pathGroupY);
      },
    );
  });

  const gestureDetectorStyle = useAnimatedStyle(() => ({
    position: "absolute",
    top: pathGroupY.value,
    left: 12.5,
    width: 25,
    height: 25,
    backgroundColor: "rgba(100, 100, 100, 0.4)",
  }));

  return (
    <View style={{ flex: 1 }}>
      <Canvas style={{ flex: 1 }}>
        <RoundedRect
          x={0}
          y={0}
          width={50}
          r={25}
          height={rectHeight}
          color="lightblue"
        />
        <FitBox src={srcRect.value} dst={dstRect.value}>
          <Group
            color="black"
            style="stroke"
            strokeJoin="round"
            strokeCap="round"
            strokeWidth={3}>
            <Path path={path1} />
            <Path path={path2} />
          </Group>
        </FitBox>
      </Canvas>
      <GestureDetector gesture={handleTap}>
        <Animated.View style={gestureDetectorStyle} />
      </GestureDetector>
    </View>
  );
};

export default Slider;

Thanks so much for any help!

[cmkf01]

Classic - I managed to answer my own question once I'd posted.

I had been attempting to essentially transform the Paths using Fitbox which is incorrect; what I actually needed to do was transform the Group with a derived value in its prop and removed Fitbox entirely.