diff --git a/README.md b/README.md index ed578a2..a9780f0 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,17 @@ You can also define a function, that'll receive current progress and for example ``` +Finally, you can manually trigger a duration-based timing animation by putting a ref on the component and calling the `performLinearAnimation(toValue, duration)` function like so: +```jsx + +``` +```javascript +this.refs.circularProgress.performLinearAnimation(100, 8000); // Will fill the progress bar linearly in 8 seconds +``` + ## Configuration You can configure the passing by following props: diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js index 8e6238c..0a7333f 100644 --- a/src/AnimatedCircularProgress.js +++ b/src/AnimatedCircularProgress.js @@ -33,6 +33,13 @@ export default class AnimatedCircularProgress extends React.Component { } ).start(); } + + performLinearAnimation(toValue, duration) { + Animated.timing(this.state.chartFillAnimation, { + toValue: toValue, + duration: duration + }).start(); + } render() { const { fill, prefill, ...other } = this.props; @@ -49,7 +56,7 @@ export default class AnimatedCircularProgress extends React.Component { AnimatedCircularProgress.propTypes = { style: View.propTypes.style, size: PropTypes.number.isRequired, - fill: PropTypes.number.isRequired, + fill: PropTypes.number, prefill: PropTypes.number, width: PropTypes.number.isRequired, tintColor: PropTypes.string,