React Native: Transform with key of "rotate" must be a string: {"rotate":"0deg"}

Question

Seems like I did everything in the documentation and referenced other examples.

Trying to animate a text component rotation:

this.state = {  
    rotateAnimation: new Animated.Value(0),
};



spin = () => {
    this.state.rotateAnimation.setValue(0);

    Animated.timing(this.state.rotateAnimation, {
        toValue: 1,
        duration: 3000,
        easing: Easing.linear
    }).start((animation) => {
        if (animation.finished) {
            this.spin();
        }
    });
};


render() {
    return (
        <Content>
            <View>
                <Text style={{
                    transform: [
                        {
                            rotate: 
                            this.state.rotateAnimation.interpolate({
                                 inputRange: [0, 1],
                                 outputRange: ["0deg", "360deg"]
                            })
                        }
                    ]

                } ]}>{this.FAIcons.circleONotch}</Text>
            </View>
        </Content>
    );
}

This works fine if I manually enter in any degree i.e rotate: "90deg"

However, when I use interpolate(), I get this error: Transform with key of "rotate" must be a string: {"rotate":"0deg"}

Seems like Interpolate is not returning a string. I tried to typecast it using "toString()" but then I get this error: Rotate transform must be expressed in degrees (deg) or radians (rad): {"rotate":"[object Object]"}

I followed this documentation: https://facebook.github.io/react-native/docs/animations.html

And referenced this example: https://gist.github.com/levynir/5962de39879a0b8eb1a2fd77ccedb2d8

What am I doing wrong here?

**** EDIT ****

Thanks to @Guilherme Cronemberger for pointing me in the right direction, you need to create the component like this.

render() {

        const StyledAnimatedText = Animated.createAnimatedComponent(Text);

}

Then utilize it like this:

return (
    <StyledAnimatedText 

        style={{
            fontFamily: 'FontAwesome',
            backgroundColor: 'transparent',
            transform: [{
                    rotate: this.state.rotateAnimation.interpolate({
                                inputRange: [0, 1],
                                outputRange: ["0deg", "360deg"]
                            })
                        },
                        { perspective: 1000 }]

                        }}>
         {this.FAIcons.circleONotch}
     </StyledAnimatedText>
)

Answer 1

Interpolate is a function which results are used only in declared "Animated" classes, so you'd add "Animated." to your Text class.

render() {

    var rotateProp =    this.state.rotateAnimation.interpolate({
                             inputRange: [0, 1],
                             outputRange: ["0deg", "360deg"]
                        })
    console.log(rotateProp) //just to check if it's returning what you want
    return (
        <Content>
            <View>
                <Animated.Text style={{
                    transform: [
                        {
                            rotate: rotateProp
                        }
                    ]

                } ]}>{this.FAIcons.circleONotch}</Animated.Text>
            </View>
        </Content>
    );
}

Answer 2

I had the same problem

Just use <Animated.Text> instead of <Text />