How to repeat React Native animation within Animation Sequence

Question

I am new to react native development and I am trying to have an animated sequence repeat an animation within that sequence.

I tried to set the value to 0 again but that did not seem to work. I want the sequence to animate the first then second and then the first again. I did not want to put it in a loop because I want to be able to change the sequence later. I know the createAnimation function is being called all three times but the animation isn't running again.

import React, { Component } from 'react';
import {
  Platform,
  Animated,
  StyleSheet,
  Text,
  View,
  Button,
  Alert,
  TouchableHighlight,
} from 'react-native';


const AnimatedButton = Animated.createAnimatedComponent(TouchableHighlight);

export default class Animater extends Component {
  showAlert = () => {
     console.log("show: ");
    Alert.alert('You need to...');
  };

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



animate = () =>{

this.animatedValue.setValue(0)
  const createAnimation = function (value, duration, delay = 0) {

  value.setValue(0);

    return Animated.timing(
      value,
      {
        toValue: 150,
        duration,
        delay
      }
    )
  }


    Animated.sequence([
    createAnimation(this.animatedValue, 500),
    createAnimation(this.animatedValue2, 500, 1000),  
    createAnimation(this.animatedValue, 500, 1000),       
  ]).start()

}



  render() {
    const interpolateColor = this.animatedValue.interpolate({
      inputRange: [0, 100, 150],
      outputRange: ['rgb(0,0,0)', 'rgb(51,250,170)' , 'rgb(0,0,0)'],
    });

    const interpolateColor2 = this.animatedValue2.interpolate({
      inputRange: [0, 150],
      outputRange: ['rgb(0,0,0)', 'rgb(51,0,86)'],
    });


    const animatedStyle = {
      backgroundColor: interpolateColor,
    };
    const animatedStyle2 = {
      backgroundColor: interpolateColor2,
    };
    return (
    <View>
     <View style={styles.containerR}>
        <AnimatedButton style={[animatedStyle, styles.buttonR]}          
         onPress={this.animate}
         activeOpacity={1}
         underlayColor={'#ea5256'}>
          <Text> This w w w </Text>
        </AnimatedButton>

       <AnimatedButton style={[animatedStyle2, styles.buttonR]}          
         onPress={this.showAlert}
         activeOpacity={1}
         underlayColor={'#ea5256'}>
          <Text> This  is</Text>
        </AnimatedButton>
    </View>
    <View style={styles.containerC}>
       <AnimatedButton style={[animatedStyle2, styles.buttonR]}          
         onPress={this.showAlert}
         activeOpacity={1}
         underlayColor={'#ea5256'}>
          <Text> This  is</Text>
        </AnimatedButton>

       <AnimatedButton style={[animatedStyle2, styles.buttonR]}          
         onPress={this.showAlert}
         activeOpacity={1}
         underlayColor={'#ea5256'}>
          <Text> This  is</Text>
        </AnimatedButton>
    </View>
    </View>

    );
  }
}

const styles = StyleSheet.create({
  buttonR: {

   // backgroundColor: '#de1738',
    padding: 10,
    borderRadius: 100,
    width: 100,
    height: 100
  },
    containerC: {
      //flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 10
    },
    containerR: {
      //flex: 3,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 10
    },

});

I expected the animatedValue animation to run again but it did not.

Answer 1

You can simply repeat the animation using loop

Animated.loop(
  Animated.sequence([
    Animated.delay(1000),
    Animated.timing(this.animatedValue, {
      toValue: 150,
      duration: 500
    })
  ]),
  {
    iterations: 10 // Number of repetitions
  }
).start()

Use the recursive function to repeat infinite repetition.

createAnimation() {
    Animated.sequence([
     Animated.delay(1000),
     Animated.timing(this.animatedValue, {
       toValue: 150,
       duration: 500
       })
    ]).start(() => {
      // Logic whenever an iteration finishes...
      createAnimation()
    });
}

componentDidMount() {
    createAnimation();