Animate TextPath when `usePathValue` is used

[davidruisinger]

Description

I have an array of points where each point's x and y value is a SharedValue<number>. I use the points within usePathValue to create my path. This path is consumed by a <TextPath /> and a <Path />. When I update the path values from within my GestureDetector, the <Path /> is updated but the <TextPath /> does not seem to handle the updates. Only after updating the text property on <TextPath />, the new path is adapted.

const linePath = usePathValue((path) => {
  "worklet";
  ...
  path.cubicTo(
    points[1].x.value,
    ...
  );
  ...
});

return (
  <Group>
    <TextPath path={linePath} ... />
    <Path path={linePath} ... />
    ...
  </Group>
);

[wcandillon]

do you have standable reproducible example? This looks interesting.

[davidruisinger]

@wcandillon does this help? It's a super simple example without gestures, but same issue: The <TextPath /> does not re-render with an updated path from usePathValue, whereas the <Path /> component re-renders as expected.