Interpolation Issues When Reusing an Interpolated Path Across Multiple Path Nodes

[laxman-stan]

Description

When using an interpolated path obtained from usePathInterpolation or path.interpolate(...) within multiple Path nodes, the interpolation appears to work correctly only in the first Path node. This issue is observed when the Path includes start and end props. In other cases, the behavior aligns with expectations.

Version

1.2.3

Steps to reproduce

run the code below

Snack, code example, screenshot, or link to a repository

import {
  Canvas,
  Path,
  Skia,
  usePathInterpolation,
} from '@shopify/react-native-skia';
import {useEffect} from 'react';
import {
  Easing,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

const p1 = Skia.Path.MakeFromSVGString(
  'M 50 120 c 0 0 3.9856 -52.2082 41.1011 -51.9873 c 37.1155 0.2209 68.9289 100.9629 102.4579 88.5806 c 33.528 -12.3823 36.062 -96.3129 101.235 -87.4759 c 65.173 8.837 69.064 77.6239 69.064 77.6239',
)!;

const p2 = Skia.Path.MakeFromSVGString(
  'M 50 120 c 0 0 18.2053 17.6315 62.5807 4.9968 c 44.3753 -12.6347 83.2043 -62.8651 103.8513 -34.5141 c 20.647 28.3509 -36.822 65.122 28.351 73.959 c 65.173 8.837 119.075 -17.7003 119.075 -17.7003',
)!;

const colors = ['red', 'green'].map(Skia.Color);

export default function Test() {
  const progress = useSharedValue(0);
  let interpolatedPath1 = usePathInterpolation(
    progress,
    [0, 1],
    [p1, p2],
  );

  useEffect(() => {
    progress.value = 0;
    progress.value = withRepeat(
      withTiming(1, {
        duration: 2000,
        easing: Easing.linear,
      }),
      -1,
      true,
    );
  }, []);

  return (
    <Canvas
      style={{flex: 1, backgroundColor: 'white'}}>
      <Path
        transform={[{translateY: 0}]}
        path={interpolatedPath1}
        style={'stroke'}
        start={0}
        end={1}
        strokeWidth={5}
        color={colors[0]}
      />

      <Path
        transform={[{translateY: 20}]}
        path={interpolatedPath1}
        style={'stroke'}
        start={0.5}
        end={1}
        strokeWidth={5}
        color={colors[1]}
      />

      <Path
        transform={[{translateY: 200}]}
        path={interpolatedPath1}
        style={'stroke'}
        strokeWidth={5}
        color={colors[0]}
      />

      <Path
        transform={[{translateY: 200 + 20}]}
        path={interpolatedPath1}
        style={'stroke'}
        strokeWidth={5}
        color={colors[1]}
      />
    </Canvas>
  );
}