diff --git a/README.md b/README.md index 99195e3..0013285 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,8 @@ You can configure the passing by following props: - **tintColor** - color of a progress line - **backgroundColor** - color of a background for progress line - **rotation** - by default, progress starts from the angle = 90⦝, you can change it by setting value from -360 to 360 +- **tension** - the tension value for the spring animation (see [here](https://facebook.github.io/react-native/docs/animations.html#core-api)) +- **friction** - the friction value for the spring animation (see [here](https://facebook.github.io/react-native/docs/animations.html#core-api)) - **children(fill)** - you can pass function as a child to receive current fill diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js index 7bf7a88..c06da21 100644 --- a/src/AnimatedCircularProgress.js +++ b/src/AnimatedCircularProgress.js @@ -2,7 +2,6 @@ import React, { PropTypes, Animated } from 'react-native'; import CircularProgress from './CircularProgress'; const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress); - export default class AnimatedCircularProgress extends React.Component { constructor(props) { @@ -23,12 +22,14 @@ export default class AnimatedCircularProgress extends React.Component { } animateFill() { + const { tension, friction } = this.props; + Animated.spring( this.state.chartFillAnimation, { toValue: this.props.fill, - tension: 7, - friction: 10 + tension, + friction } ).start(); } @@ -53,4 +54,11 @@ AnimatedCircularProgress.propTypes = { width: PropTypes.number.isRequired, tintColor: PropTypes.string, backgroundColor: PropTypes.string, + tension: PropTypes.number, + friction: PropTypes.number } + +AnimatedCircularProgress.defaultProps = { + tension: 7, + friction: 10 +};