Rotate an SVG in React Native

Question

I have an SVG that I've created in react native, and I'd simply like to rotate this 360 degrees continuously in the most efficient way possible.

Thanks.

Answer 1

Just use transform. It works perfectly.

<YourSvg
    height={20}
    width={20}
    style={{ transform: [{ rotateY: '180deg' }] }}
/>

Answer 2

Just wrap your SVG in a View component and make use of the Animated API. Your code would be something in the lines of this:

class YourComponent extends React.Component {

  constructor(props) {
    super(props);
    this.animation = new Animated.Value(0);
  }

  render() {

    const rotation = this.animation.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg']
    });

    return (
      <Animated.View
        style={{transform: [{rotate: rotation}] }}
      >
        <YourSVG />
      </Animated.View>
    );


  componentDidMount() {

    Animated.loop(
      Animated.timing(this.animation, {toValue: 1, duration: 2000})
    ).start();    
  }
}