React Native: How do you animate the rotation of an Image?

Question

Rotation is a style transform and in RN, you can rotate things like this

  render() {     return (       <View style={{transform:[{rotate: '10 deg'}]}}>         <Image source={require('./logo.png')} />       </View>     );   } 

However, to animate things in RN, you have to use numbers, not strings. Can you still animate transforms in RN or do I have to come up with some kind of sprite sheet and change the Image src at some fps?

Answer 1

You can actually animate strings using the interpolate method. interpolate takes a range of values, typically 0 to 1 works well for most things, and interpolates them into a range of values (these could be strings, numbers, even functions that return a value).

What you would do is take an existing Animated value and pass it through the interpolate function like this:

spinValue = new Animated.Value(0);  // First set up animation  Animated.timing(     this.spinValue,   {     toValue: 1,     duration: 3000,     easing: Easing.linear, // Easing is an additional import from react-native     useNativeDriver: true  // To make use of native driver for performance   } ).start()  // Next, interpolate beginning and end values (in this case 0 and 1) const spin = this.spinValue.interpolate({   inputRange: [0, 1],   outputRange: ['0deg', '360deg'] }) 

Then use it in your component like this:

<Animated.Image   style={{transform: [{rotate: spin}] }}   source={{uri: 'somesource.png'}} /> 

In case if you want to do the rotation in loop, then add the Animated.timing in the Animated.loop

Animated.loop(  Animated.timing(    this.spinValue,    {     toValue: 1,     duration: 3000,     easing: Easing.linear,     useNativeDriver: true    }  ) ).start();