React Native Loading Animation

react-loading.js

/**
 * LoadingView
 */
'use strict';

var React = require('react-native');

var {
  TouchableWithoutFeedback,
  Animated,
  StyleSheet,
  Image,
  View,
  Easing
} = React;

var TIMES = 400;

var LoadingView = React.createClass({

  getInitialState() {
    return {
      angle: new Animated.Value(0),
    };
  },

  componentDidMount() {
    this._animate();
  },

  _animate() {
    this.state.angle.setValue(0);
    this._anim = Animated.timing(this.state.angle, {
      toValue: 360*TIMES,
      duration: 800*TIMES,
      easing: Easing.linear
    }).start(this._animate);
  },

  componentDidUnmount:function(){

  },

  render() {
    return (
      <View style={styles.container}>
          <Animated.Image
            source={{uri: 'MGJControls.bundle/loading_circle.png'}}
            style={[
              styles.rotateCard,
              {transform: [
                {rotate: this.state.angle.interpolate({
                  inputRange: [0, 360],
                  outputRange: ['0deg', '360deg']
                })},
              ]}]}>
          </Animated.Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  rotateCard: {
    width:35,
    height:35,
    justifyContent:'center',
    backgroundColor:'transparent'
  }
});


module.exports = LoadingView;

Hi great work! When I tried this, the animation was kind of choppy. It would stop for a split second every second or so. Is there a way to have a smooth effect? Thank you!

This is amazing. Thanks for this!

Very nice work! A little comment. componentDidUnmount is not a valid method. please correct this with componentWillUnmount.
You can add the option to stop the animation in there.
componentWillUnmount()
{
this._anim.stopAnimation();
}

You have to change the duration value to make it smoother.

How would this work to animate, for example, from 0 to 270deg and stop?