5

I'm trying to animate an SVG path's length form 0 to it's full length in React Native Reanimated 2. Here is my sample path:

const AnimatedPath = Animated.createAnimatedComponent(Path);

const animatedProps = useAnimatedProps(() => {
  const path =
    `M${width * 0.182} ${height * 0.59} ` +
    `L${width * 0.443} ${height * 0.59} ` +
    `L${width * 0.443} ${height * 0.39} `;
  return {
    d: path,
  };
});

return (
  <Svg height="100%" width="100%">
    <AnimatedPath animatedProps={animatedProps} fill="none" stroke="red" strokeWidth="5" />
  </Svg>
);

I have tried adding some interpolation to the width of the path with no luck. I have also tried looking at the interpolatePath() implementation from Redash but it seems to take in two paths as the output range. Anything else I should look at?

ReactNativeDev
  • 51
  • 2

1 Answers1

1

You need to use useAnimatedStyle instead of useAnimatedProps, and calculate d value for your Path component (wrapped by Animated) using useDerivedValue, based on some progress shared value which you change from 0 to 1 using withTiming.

Fancy John
  • 38,140
  • 3
  • 27
  • 27