Animated API rotation around the center, just like using originX and originY without animation

Question

How can i use the animated API to rotate a line around an originX, originY point, just like i would do using:

 rotation: angle, originX: someX, originY: someY

where angle would be a continuously changing state to act like animation.

I have opened a more detailed question here in SO , but i didn’t have any luck yet. Any help is really appreciated!

[angelos3lex]

@msand Thanks a LOT! This is working. I’m trying to understand the reason of translating X and Y by (±)width / 2 and why this should be the case only on android. Is there some reference to it somewhere?

[msand]

This seems to work quite fine: https://snack.expo.io/@msand/vengeful-strawberries

import React, { Component } from 'react';
import { Text, View, StyleSheet, Animated, Platform } from 'react-native';
import { Svg, Path, Rect, G, Circle } from 'react-native-svg';

const AnimatedG = Animated.createAnimatedComponent(G);

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

  componentDidMount() {
    Animated.loop(
      Animated.timing(this.state.rotation, {
        useNativeDriver: true,
        duration: 3000,
        toValue: 1,
      })
    ).start();
  }

  onLayout =
    Platform.OS === 'android'
      ? a => {
          this.setState({ offset: a.nativeEvent.layout.width / 2 });
        }
      : null;

  render() {
    const offsetAndroid = this.state.offset;
    const [pivotX, pivotY] = [25, 25];
    return (
      <Svg
        width="100%"
        height="100%"
        onLayout={this.onLayout}
        viewBox={`0 0 50 50`}>
        <Rect width="50" height="50" />
        <G transform={`translate(${pivotX}, ${pivotY})`}>
          <Circle r="5" fill="white" />
          <AnimatedG
            style={{
              transform: [
                { translateX: -offsetAndroid },
                {
                  rotate: this.state.rotation.interpolate({
                    inputRange: [0, 1],
                    outputRange: ['0deg', '360deg'], // I would like to set pivot point at 25 25
                  }),
                },
                { translateX: offsetAndroid },
              ],
            }}>
            <Path
              fill="#FFF"
              d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"
              transform={`translate(-${pivotX} -${pivotY})`}
            />
          </AnimatedG>
        </G>
      </Svg>
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TestLogo />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});