How to make Animated timing/spring refresh with the new start? - react-native

Question

I was trying to include the Circular Progress module to my project. Everything work well except that When the Fill value change from 100 to 0 ,the Animated.spring/ timing function will draw back. Is there any idea to make circular progress bar refresh with the start point when it hit end point?
import React, { PropTypes } from 'react';
import { View, Animated } from 'react-native';
import CircularProgress from './CircularProgress';
const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
export default class AnimatedCircularProgress extends React.Component {
constructor(props) {
super(props);
this.state = {
chartFillAnimation: new Animated.Value(props.prefill || 0)
}
}
componentDidMount() {
this.animateFill();
}
componentDidUpdate(prevProps) {
if (prevProps.fill !== this.props.fill) {
this.animateFill();
}
}
animateFill() {
const { tension, friction } = this.props;
Animated.spring(
this.state.chartFillAnimation,
{
toValue: this.props.fill,
tension,
friction
}
).start();
}
performLinearAnimation(toValue, duration) {
Animated.timing(this.state.chartFillAnimation, {
toValue: toValue,
duration: duration
}).start();
}
render() {
const { fill, prefill, ...other } = this.props;
return (
<AnimatedProgress
{...other}
fill={this.state.chartFillAnimation}
/>
)
}
}
AnimatedCircularProgress.propTypes = {
style: View.propTypes.style,
size: PropTypes.number.isRequired,
fill: PropTypes.number,
prefill: PropTypes.number,
width: PropTypes.number.isRequired,
tintColor: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
backgroundColor: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
tension: PropTypes.number,
friction: PropTypes.number
}
AnimatedCircularProgress.defaultProps = {
tension: 7,
friction: 10
};

Answer 1

.start() takes an optional callback which will be called once the animation is finished, so you can recursively call your animation:
animateFill() {
const { tension, friction } = this.props;
this.state.charFillAnimation.setValue(0); //reset to 0
Animated.spring(
this.state.chartFillAnimation,
{
toValue: this.props.fill,
tension,
friction
}
).start(() => this.animateFill());
}