CODEWITHSUNDEEP
react-native
user2287474
user2287474

Reputation: 646

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

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>
)

Upvotes: 16

Views: 14260

Answers (4)

Devin Godage
Devin Godage

Reputation: 11

I had the same issue

I fixed it by using <Animated.SomeComponent> instead of <SomeComponent>

As an example if you want to animate View component :

import { Animated, View } from 'react-native';

<Animated.View>

<ChildComponents/>

</Animated.View>

Thanks.

Upvotes: 1

Ruchika
Ruchika

Reputation: 1

I had the same problem and I fix it by doing this.Convert PI in degree = (PI = 180deg) & (2 * PI= 360geg),

The answer is :

           { rotate: progress.interpolate(
              {
                inputRange: [0.5, 1],
                outputRange: ['180deg', '360deg'],
              }
            ),
          },

Upvotes: 0

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

I had the same problem

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

Upvotes: 3

Guilherme Cronemberger
Guilherme Cronemberger

Reputation: 814

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>
    );
}

Upvotes: 31

Related Questions