Circle animated rotation not working as expected.

Question

I'm trying to implement animated pie chart using the example from here. The only difference is that the author uses react-native-reanimated in his example, but I want to use embedded react-native Animated API. Seems like it causes rotation animation errors - they are not working as expected.

Here is the component I am speaking about:

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

type Props = {
  strokeWidth: number;
  size: number;
  items: DonutChartItem[];
};

export const DonutChart: React.FC<Props> = ({size, strokeWidth, items}) => {
  const center = size / 2;
  const radius = (size - strokeWidth) / 2;
  const angles: number[] = [];
  let currentAngle = -90;
  items.forEach(item => {
    angles.push(currentAngle);
    currentAngle += item.percentage * 360;
  });

  const progress = useRef(new Animated.Value(0)).current;

  const refresh = useCallback(() => {
    progress.setValue(0);
    Animated.timing(progress, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: false,
    }).start();
  }, [progress]);

  useEffect(() => {
    refresh();
  }, [refresh]);

  return (
    <Svg viewBox={`0 0 ${size} ${size}`}>
      {items.map((item, index) => (
        <DonutChartSegment
          key={index}
          center={center}
          radius={radius}
          angle={angles[index]}
          strokeWidth={strokeWidth}
          color={item.color}
          percentage={item.percentage}
          progress={progress}
        />
      ))}
    </Svg>
  );
};

type DonutChartSegmentProps = {
  center: number;
  radius: number;
  angle: number;
  strokeWidth: number;
  color: ColorValue;
  percentage: number;
  progress: Animated.Value;
};
export const DonutChartSegment: React.FC<DonutChartSegmentProps> = ({
  center,
  radius,
  angle,
  strokeWidth,
  color,
  percentage,
  progress,
}) => {
  const circumference = 2 * Math.PI * radius;

  const strokeDashoffset = progress.interpolate({
    inputRange: [0, 1],
    outputRange: [circumference, circumference * (1 - percentage)],
  });

  const rotateAngle = progress.interpolate({
    inputRange: [0, 1],
    outputRange: [-90, angle],
  });

  return (
    <AnimatedCircle
      originX={center}
      originY={center}
      cx={center}
      cy={center}
      r={radius}
      // rotation={angle}
      strokeWidth={strokeWidth}
      stroke={color}
      strokeDashoffset={strokeDashoffset}
      strokeDasharray={circumference}
      transform={[
        {translateX: center},
        {translateY: center},
        {rotate: rotateAngle},
        {translateX: -center},
        {translateY: -center},
      ]}
    />
  );
};

Here is the result:

https://user-images.githubusercontent.com/13959241/213272209-ba4e2d49-3676-41e9-970f-1834f27b2369.mov

When I replace transform prop with a rotation prop, it looks as follows:

https://user-images.githubusercontent.com/13959241/213272404-e72880d7-3c4b-40c0-8a15-2bbb6558eeb3.mov

But what I want is:

Testing both Android and iOS.
react-native-svg - 13.6.0
react-native 0.70.5

Here is a snack with minimal reproducible example.

I don't know if it would be helpful, but here is an issue, opened by the tutorial author in react-native-reanimated repo with a bit different problem, but the similar component.

Use the linked Expo Snack as the entry point and compare the AnimatedCircle transform with the rotation prop on both Android and iOS. Reproduce the behavior with react-native-svg 13.6.0 and React Native 0.70.5, then establish the expected animation behavior before identifying an appropriate fix.