React native Android fade animation flashing in loop

Question

In React Native 0.61, I've got a pulse animation happening. It works properly on iOS, but not on Android.

Here's the code:

 state = { fadeAnim: new Animated.Value(1), springValue: new Animated.Value(0), }; runPulseAnimation() { Animated.loop( Animated.parallel([ Animated.timing(this.state.springValue, { toValue: 1, friction: 3, tension: 40, duration: 1500, }), Animated.timing(this.state.fadeAnim, { toValue: 0, duration: 1500, }), ]), ).start(); }

The loop happens properly, however on Android, right after the animation ends, opacity switches back to 1 before the spring value resets. Again, this doesn't happen on iOS.

Anyone run into something like this?

Answer 1

In your case, the default value does not seem to be initialized. Would you like to try this if what you're trying to do is a repetitive task?

      runPulseAnimation() {
        this.state.fadeAnim.setValue(1)
        this.state.springValue.setValue(0)

      Animated.parallel([
        Animated.timing(this.state.springValue, {
          toValue: 1,
          friction: 3,
          tension: 40,
          duration: 1500,
        }),
        Animated.timing(this.state.fadeAnim, {
          toValue: 0,
          duration: 1500,
        }),
      ]).start(() => this.runPulseAnimation());
      }

Answer 2

Finally solved it. Instead of starting with 1, and fading to 0, since the beginnging of my view is hidden behind another view with opacity 1, I was able to sequence the animations and fade in and out and start the fadeAnim at 1.

 state = { fadeAnim: new Animated.Value(0), springValue: new Animated.Value(0), };

 let fadeInAndOut = Animated.sequence([ Animated.timing(this.state.fadeAnim, { toValue: 1, duration: 750, }), Animated.timing(this.state.fadeAnim, { toValue: 0, duration: 750, }), ]); Animated.loop( Animated.parallel([ fadeInAndOut, Animated.timing(this.state.springValue, { toValue: 1, friction: 3, tension: 40, duration: 1500, }), ]), ).start();