react native reanimated animation works on once

Question

I am using reanimated to create a custom alert inside a modal, it works fine but the animation will work only once in the beginning after that modal is visible and the contents are updated but animation won't work,

here is my code

componentDidUpdate() {
    // stopClock(clock);
    if (this.state.visible) {
      block([
        timing(this.val, {
          toValue: 1,
          duration: 100,
          easing: Easing.inOut(Easing.ease),
        }).start(),
        spring(this.scale, {
          toValue: 1,
          damping: 12,
          mass: 0.6,
          stiffness: 150.6,
          overshootClamping: false,
          restSpeedThreshold: 0.1001,
          restDisplacementThreshold: 0.001,
        }).start(),
      ]);
    } else {
      block([
        timing(this.val, {
          toValue: 0,
          duration: 0,
          easing: Easing.inOut(Easing.ease),
        }).start(),
        spring(this.scale, {
          toValue: 0,
          damping: 12,
          mass: 0.6,
          stiffness: 150.6,
          overshootClamping: false,
          restSpeedThreshold: 0.001,
          restDisplacementThreshold: 0.001,
        }).start(),
      ]);
    }
  }

score 4 · Accepted Answer · answered Jan 17 '20 at 08:38

you have to add animation values to zero before running the animations like:-

componentDidUpdate() {
    // stopClock(clock);
   //Setting animations values as zero
    this.val.setValue(0);
    this.scale.setValue(0);
    if (this.state.visible) {
      block([
        timing(this.val, {
          toValue: 1,
          duration: 100,
          easing: Easing.inOut(Easing.ease),
        }).start(),
        spring(this.scale, {
          toValue: 1,
          damping: 12,
          mass: 0.6,
          stiffness: 150.6,
          overshootClamping: false,
          restSpeedThreshold: 0.1001,
          restDisplacementThreshold: 0.001,
        }).start(),
      ]);
    } else {
      block([
        timing(this.val, {
          toValue: 0,
          duration: 0,
          easing: Easing.inOut(Easing.ease),
        }).start(),
        spring(this.scale, {
          toValue: 0,
          damping: 12,
          mass: 0.6,
          stiffness: 150.6,
          overshootClamping: false,
          restSpeedThreshold: 0.001,
          restDisplacementThreshold: 0.001,
        }).start(),
      ]);
    }
  }

react native reanimated animation works on once

1 Answers1