CODEWITHSUNDEEP
react-nativeanimationtransform
upendra
upendra

Reputation: 31

react native spin animation not working

import React,{Component} from 'react';
import {Text,View,Button,Animated,Easing,Image} from 'react-native';

class ToggleText extends Component{

constructor(props){
    super(props);
    this.spinValue = new Animated.Value(0);
}

spin () {
    this.spinValue.setValue(0)
    Animated.timing(
      this.spinValue,
      {
        toValue: 1,
        duration: 4000,
        easing: Easing.linear,

      }
    ).start(() => this.spin())
  }

componentDidMount () {
    this.spin();
  }

render(){
    const spin = this.spinValue.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']
      })

    return(
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
        <Animated.Image
        style={{
          width: 227,
          height: 200,
          transform: [{rotate: spin}] }}
          source={{uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}
      />
      </View>    
    );
}
}

export default ToggleText;

Upvotes: 1

Views: 3869

Answers (1)

victor77dev
victor77dev

Reputation: 36

I also have similar issue in Android where the animation stuck. I found that it is just lagging.

I solved it by using native driver. By adding this useNativeDriver: true,

Animated.timing(
  this.spinValue,
  {
    toValue: 1,
    duration: 4000,
    easing: Easing.linear,
    useNativeDriver: true, //<---Add this
  }

Upvotes: 2

Related Questions