React Native Lottie - Upon Animation End Reverse

Question

Context

I am new to lottie-react-native and have managed to implement my first animation:

constructor(props) {
    super(props);
    this.state = {
        progress: new Animated.Value(0),
        loop: true
    }
}
componentDidMount() {
    this.animation.play();
}
render() {
const { progress, loop } = this.state;
return (
    <View style={{display:'flex',height:'auto', alignItems: 'center',justifyContent:'center'}}>
    <LottieView
    ref={animation => {
        this.animation = animation;
      }}
    speed={1}
    autoPlay
    source={NOACTIVITY}
    progress={progress}
    loop={loop}
    height={300}
    width={300}
    style={{margin:0,}}
  />
  </View>
)

}

The Problem

I am now trying to create a loop with this animation that plays it forwards, then plays it backwards and then starts the process again.

I have done some research and concluded that this must be completed using the animated values and timing? I have found many examples (in the react native docs!) of playing forwards and backwards but not together.

Can this be completed on component did mount? or does it have to be a separate function?

Thanks in advance!

Answer 1

The solution I came up with was using a sequence inside a loop as follows:

AnimateFunction = () => {
    Animated.loop(
        Animated.sequence([
            Animated.timing(
                this.state.progress,
                {
                  toValue: 1,
                  duration: (5000),
                  //easing: Easing.linear()
                }
              ),
              Animated.timing(
                this.state.progress,
                {
                  toValue: 0,
                  duration: (5000),
                  //easing: Easing.linear()
                }
              )
        ])

    ).start();
  }

I found that adding easing made the animation jump a little when the application restarted at 0 so it is commented out for now.