Animate Svg.G, использующий реагирующий нативный Animated

Question

Получив вдохновение от этого ответа, я реализовал следующее, чтобы вращать элемент Svg.G.Основанный на setNativeProps для достижения производительной анимации, этот подход работает для таких элементов, как многоугольники и прямоугольники, но не для элемента G.Я получаю сообщение об ошибке: Вы устанавливаете стиль { rotation: ... } как опору.Вы должны вложить его в объект стиля.Например, { style: { rotation: ... } } Как правильно реализовать эту анимацию?

Я также столкнулся с другим подходом к анимации элементов Svg в этом хранилище .Однако это кажется устаревшим.

import { Animated } from 'react-native';
import Svg,{G} from 'react-native-svg';
const AnimatedG = Animated.createAnimatedComponent(G);

export default class RotatingControl extends Component {

    state = {
        animator: new Animated.Value(0),
    }

    componentDidMount() {
        Animated.timing(
            this.state.animator,
            {
                toValue: 100,
                duration: 10000,
            }
        ).start();

        this.state.animator.addListener( ({value}) => {
            this._animG.setNativeProps({rotation: value.toString()});
            });
    }
    
    render() {
      return (
      <Svg 
      height="200" 
      width="100"
      >
      <AnimatedG
      ref={ref => { this._animG = ref; }}
      rotation="30"
      origin="100, 100"
      >
      <Polygon
        points="40,110 40,90 20,100"
        stroke="blue"
        strokeWidth="1"
        fill="grey"
      />
    }
    </AnimatedG>
    </Svg>
    )}
}