title: React Native: Transform with key of "rotate" must be a string: {"rotate":"0deg"}
body: <p>Seems like I did everything in the documentation and referenced other examples.</p>
  
  <p>Trying to animate a text component rotation:</p>
  
  <pre><code>this.state = {  
      rotateAnimation: new Animated.Value(0),
  };
  
  
  
  spin = () =&gt; {
      this.state.rotateAnimation.setValue(0);
  
      Animated.timing(this.state.rotateAnimation, {
          toValue: 1,
          duration: 3000,
          easing: Easing.linear
      }).start((animation) =&gt; {
          if (animation.finished) {
              this.spin();
          }
      });
  };
  
  
  render() {
      return (
          &lt;Content&gt;
              &lt;View&gt;
                  &lt;Text style={{
                      transform: [
                          {
                              rotate: 
                              this.state.rotateAnimation.interpolate({
                                   inputRange: [0, 1],
                                   outputRange: ["0deg", "360deg"]
                              })
                          }
                      ]
  
                  } ]}&gt;{this.FAIcons.circleONotch}&lt;/Text&gt;
              &lt;/View&gt;
          &lt;/Content&gt;
      );
  }
  </code></pre>
  
  <p>This works fine if I manually enter in any degree i.e <code>rotate: "90deg"</code></p>
  
  <p>However, when I use interpolate(), I get this error: <code>Transform with key of "rotate" must be a string: {"rotate":"0deg"}</code></p>
  
  <p>Seems like Interpolate is not returning a string. I tried to typecast it using "toString()" but then I get this error: <code>Rotate transform must be expressed in degrees (deg) or radians (rad): {"rotate":"[object Object]"}</code></p>
  
  <p>I followed this documentation: <a href="https://facebook.github.io/react-native/docs/animations.html" rel="noreferrer">https://facebook.github.io/react-native/docs/animations.html</a></p>
  
  <p>And referenced this example: <a href="https://gist.github.com/levynir/5962de39879a0b8eb1a2fd77ccedb2d8" rel="noreferrer">https://gist.github.com/levynir/5962de39879a0b8eb1a2fd77ccedb2d8</a></p>
  
  <p>What am I doing wrong here?</p>
  
  <p>**** EDIT **** </p>
  
  <p>Thanks to @Guilherme Cronemberger for pointing me in the right direction, you need to create the component like this.</p>
  
  <pre><code>render() {
  
          const StyledAnimatedText = Animated.createAnimatedComponent(Text);
  
  }
  </code></pre>
  
  <p>Then utilize it like this:</p>
  
  <pre><code>return (
      &lt;StyledAnimatedText 
  
          style={{
              fontFamily: 'FontAwesome',
              backgroundColor: 'transparent',
              transform: [{
                      rotate: this.state.rotateAnimation.interpolate({
                                  inputRange: [0, 1],
                                  outputRange: ["0deg", "360deg"]
                              })
                          },
                          { perspective: 1000 }]
  
                          }}&gt;
           {this.FAIcons.circleONotch}
       &lt;/StyledAnimatedText&gt;
  )
  </code></pre>