Animated.loop image - react-native

Question

Back in 1996 I created spinning logos for clients, because I could, and now in 2017 I'm back at it, thanks to Animated.
The code below the <hr /> works, but there's a tiny bump when it restarts.
Any idea how I can use Animated.loop? It doesn't: «each time it reaches the end, it resets and begins again from the start».
Animated.loop(
Animated.timing(this.state.spinValue, {
toValue: 1,
duration: this.props.duration,
easing: Easing.linear,
useNativeDriver: true
})
).start();
static defaultProps = {
duration: 60 / (33 + 1/3) * 1000
}
constructor (props) {
super(props);
this.state = {
spinValue: new Animated.Value(0)
};
}
componentDidMount () {
this._animate();
}
_animate () {
Animated.timing(this.state.spinValue, {
toValue: 1,
duration: this.props.duration,
easing: Easing.linear,
useNativeDriver: true
}).start(event => {
if (event.finished) {
this.setState({
spinValue: new Animated.Value(0)
}, this._animate.bind(this));
}
});
}
render () {
const spin = this.state.spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
});
return (
<View style={ Loading.style.container }>
<Animated.Image
source={ logo }
style={{ transform: [{ rotate: spin }] }}
/>
</View>
);
}

Answer 1

Easy to use react-native-LoopAnimation.js'
https://github.com/Infinity0106/react-native-LoopAnimation
import LoopAnimation from 'react-native-LoopAnimation.js'
...
render() {
//you can also use, like source={imgSource}
const imgSource=
{uri:'http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg',width:700,height:306};
return (
<View style={{flex:1}}>
{/*this is the background animation */}
<LoopAnimation source={require('./img/back.jpg')} duration={10000} />
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}>
{/*Content goes here*/}
<View style={{width: 200, height: 400, backgroundColor: 'powderblue'}} />
</View>
</View>
);
}