Reset Circle Without Return Animation?

[AndresTIY]

So I'm using this circular progress bar as a timer. When the timer counts down from let's say 30 seconds, the fill amount is changed accordingly. But I need a new timer to start as soon as the 30 seconds are up, so the fill amount resets to 0 again.

When it resets, there's a return animation on top of that which is not ideal. Is there anyway to turn this off?

I looked at this post which was from 2017 so was hoping there was a better solution now.

Thanks!

[aboveyunhai]

As this post states, the key point is to insert some own condition before this.animate() inside the componentDidUpdate.
The return animation comes from [100->0]. If you want to use it like a clock, insert the following code to reset the fillAnimation hence [0->0] (the this may or may not work depends on your previous implementation);

componentDidUpdate(prevProps) {
    if (prevProps.fill !== this.props.fill) {
      //skip return animation
      if (this.props.fill === 0 && this.props.skipAnimOnComplete === true){
        this.setState(
          { fillAnimation: new Animated.Value(0) }
        );
      }
      this.animate();
    }
  }

Define them inside propTypes and probably typescript support.

AnimatedCircularProgress.propTypes = { skipAnimOnComplete: PropTypes.bool };
AnimatedCircularProgress.defaultProps = { skipAnimOnComplete: false};

Now you can pass the parameter in your own code to determine whether skip or not.

<AnimatedCircularProgress skipAnimOnComplete={true} ></AnimatedCircularProgress>

This may break some functionalities so I explicitly introduced a parameter for it, don't turn it on unless you know what you are doing.

[ChaossAdept7]

@AndresTIY i solved that by using "key" prop: when you want animation to be - set and keep one certain key. When you want to reset - change key, and there will be no animation:

<AnimatedCircularProgress
  key={this._setupNotStartedYet() ? 'key_diagnostics' : 'key_setup'}
>
  {() => (picture)}
</AnimatedCircularProgress>

Here while this._setupNotStartedYet() this is true - i have 100% and i needed to reset it to 0 without animation. That approach worked for me.

[calinpastean]

I needed a similar functionality, where I needed the circle to reset to a full state, but I went through a different route:

Added this method in the AnimatedCircularProgress component (same level as componentDidUpdate, etc..)

  resetCircle() {
    this.setState({
      fillAnimation: new Animated.Value(100)
    })
  }

and used it like circularProgressRef.current.resetCircle(); when I needed to reset the circle.

Keep in mind this is not how things should work in react though, usually what you want to do is pass down functionality to children in props, and pass up notifications from children in events

[Furciferrr]

You can reset your state without animation:

const circularProgress = React.useRef<AnimatedCircularProgress>(null);
 circularProgress.current?.setState({
      fillAnimation: new Animated.Value(0),
  });