Rotation via setNativeProps transform doesn't center

Great library. I’m trying to work with 7.1.2 on iOS (no expo) to animate the rotation of a circle. The circle is definitely moving, but seems to be rotating around 0,0 - I need it to rotate around the center point (24, 24). Looks like originX/Y aren’t being applied in this scenario.

The code I’m currently using is below. Is this a way I can achieve center point rotation?

Happy to write a PR if the native code needs extending to support this.

Many thanks Tom

react-native-svg@7.1.2 react-native@0.57.1 xcode@10.0

import * as React from 'react'
import Svg, { Path, Circle } from 'react-native-svg'
import { Animated } from 'react-native'

const radius = 22.8
const circumference = radius * 2 * Math.PI
const offset = circumference - (40 / 100) * circumference

export class MicrophoneActiveIcon extends React.Component {
  public circleRef: any

  public state = {
    rotation: new Animated.Value(-90)
  }

  public componentDidMount() {
    Animated.loop(
      Animated.timing(this.state.rotation, {
        toValue: 270,
        duration: 1000,
        useNativeDriver: true
      })
    ).start()

    this.state.rotation.addListener(({ value }) => {
      this.circleRef.setNativeProps({
        transform: [{ rotate: value.toString() }]
      })
    })
  }

  public render() {
    return (
      <Svg width="48" height="48">
        <Circle
          ref={ref => {
            this.circleRef = ref
          }}
          cx="24"
          cy="24"
          r={radius.toString()}
          stroke="black"
          strokeWidth={2}
          fill="none"
          originX="24"
          originY="24"
          strokeLinecap="round"
          strokeDasharray={`${circumference.toString()} ${circumference.toString()}`}
          strokeDashoffset={offset.toString()}
        />
      </Svg>
    )
  }
}

[riglar]

Thanks for your detailed response @msand

I’ve tried all your suggestions and seem to be getting decent behaviour using this transform:

 { translateX: 24 },
 { translateY: 24 },
 { rotate: value.toString() },
 { translateX: -24 },
 { translateY: -24 },

I’ve unset useNativeDriver as you suggest.

Favour owed, hit me up if you need PR work doing.

[msand]

Or perhaps something like this:

import React, { Component } from "react";
import Svg, { Circle } from "react-native-svg";
import extractStroke from "react-native-svg/lib/extract/extractStroke";
import { Animated, Easing } from "react-native";

const radius = 22.8;
const circumference = radius * 2 * Math.PI;

export default class App extends Component {
  state = {
    rotation: new Animated.Value(0),
  };

  componentDidMount() {
    Animated.loop(
      Animated.timing(this.state.rotation, {
        toValue: circumference,
        duration: 10000,
        easing: Easing.linear
      }),
    ).start();

    this.state.rotation.addListener(({ value }) => {
      this.circleRef.setNativeProps(
        extractStroke({
          stroke: "black",
          strokeWidth: 2,
          strokeLinecap: "round",
          strokeDasharray: circumference,
          strokeDashoffset: value,
        }, []),
      );
    });
  }

  render() {
    return (
      <Svg width="48" height="48">
        <Circle
          ref={ref => {
            this.circleRef = ref;
          }}
          cx="24"
          cy="24"
          r={radius}
          fill="none"
        />
      </Svg>
    );
  }
}

Seems there’s something a bit unexpected with the transforms, will have to look into it later on.