react native animated repeat infinity

Question

I have the following animation.

  componentWillMount(){
    this.animatedValue = new Animated.Value(300);
  }

  componentDidMount(){
    Animated.timing( this.animatedValue , {
      toValue: -100,
      duration: 3000,

    } ).start();
  }

  render() {
    const animatedStyle = { marginLeft: this.animatedValue, marginRight: - this.animatedValue };

    return (
      <View style={{flexDirection: 'row', height: 100,}}>
        <Animated.View style={[ animatedStyle,{backgroundColor: 'blue', width:100}]} />
      </View>
    );
  }

I would like to repeat endless times. Anyone have any suggestions?

Answer 1

2019 solution:

Animated.loop(Animated.timing(this.animatedValue , {
    toValue: -100,
    duration: 3000,
})).start();

Answer 2

Pass a callback to Animated.start() that resets the Animated value and starts the animation again. For example:

componentDidMount(){
  this.runAnimation();
}

runAnimation() {
  this.animatedValue.setValue(300);
  Animated.timing(this.animatedValue, {
    toValue: -100,
    duration: 3000,
  }).start(() => this.runAnimation());
}

If you need to stop the animation at any point, take a look at this question/answer.