title: How to animate a part of an svg file in React Native
body: <p>I'm working on a react native app, and I need to animate (rotate around central point) a part of an svg file. how can I access the component I want to animate ?</p>
  
  <p>I've tried to convert the svg file in jsx format. but still I cannot access the component I want to rotate  </p>
  
  <p>App.js : </p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, Text, View, Animated } from 'react-native';
  import SvgComponent from './assets/hotFan';
  
  
  class App 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 (
        &lt;Animated.View style={{transform: [{rotate: rotation}]}}&gt;
            &lt;SvgComponent/&gt;
        &lt;/Animated.View&gt;
      );
    }
  
    componentDidMount() {
  
      Animated.loop(
        Animated.timing(this.animation, {toValue: 1, duration: 2000})
      ).start();    
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  
  export default App;
  </code></pre>
  
  <p>I cannot put the whole component code here as it surpasses the characters limit. but you can convert <a href="https://drive.google.com/file/d/1lKaSWTO1_0cQQN6rtdaw_yWE9qa5nSjV/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1lKaSWTO1_0cQQN6rtdaw_yWE9qa5nSjV/view?usp=sharing</a> to jsx file using <a href="https://www.smooth-code.com/open-source/svgr/playground/" rel="nofollow noreferrer">https://www.smooth-code.com/open-source/svgr/playground/</a></p>
  
  <p>the actual code rotates the whole component around, but the internal arrow is the one that is supposed to rotate instead of the whole component.</p>