How to get numeric value from Reanmited Value?

Question

I create a simple animation using react native reanimated but I can't access the numeric value of Reanimated Value

I using victory native pie chart, and I want to make a simple effect that pie angle goes from 0 to 360 but I've tried react-native animated API it works well with add listener but I want use reanimated for performance issue

the animation effect that I'm looking for that the chart starts from 0 to 360

run correctly with react-native Animated API:

const Chart = props => {
  const { data, width, height } = props;
  const endAngleAnimatedValue = new Value(0);
  const [endAngle, setEndAngle] = useState(0);
  const runTiming = Animated.timing(endAngleAnimatedValue, {
    duration: 1000,
    to: 360
  });

  useEffect(() => {
    endAngleAnimatedValue.addListener(_endAngle => setEndAngle(_endAngle));
    runTiming.start();
    return () => {
      endAngleAnimatedValue.removeAllListeners();
    };
  }, [endAngleAnimatedValue]);

  return (
    <VictoryPie
      data={data}
      width={width}
      height={height}
      padding={0}
      startAngle={0}
      endAngle={endAngle}
      style={{
        data: {
          fill: ({ datum }) => datum.fill,
          fillOpacity: 0.7
        }
      }}
    />
  );
};

How I can achieve the desired output with reanimated?

Answer 1

I totally forgot about this question,

Here we can have two implementations if using react-native-reanimated v1:

1. using react-native-svg and some helpers from react-native-redash

2. using `const AnimatedPie = Animated.createAnimatedComponent(VictoryPie)` then passing `endAngleAnimatedValue` as a prop.

In reanimated v2:

You can use explicitly .value to animated sharedValues, derivedValues, but also you have to createAnimatedComponent