diff --git a/README.md b/README.md index 99195e3..5a35ba5 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,7 @@ 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 +- **speed** - speed of the animation, either 'slow' or 'fast' - **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..b320205 100644 --- a/src/AnimatedCircularProgress.js +++ b/src/AnimatedCircularProgress.js @@ -2,6 +2,16 @@ import React, { PropTypes, Animated } from 'react-native'; import CircularProgress from './CircularProgress'; const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress); +const speedMap = { + slow: { + tension: 20, + friction: 30 + }, + fast: { + tension: 7, + friction: 10 + } +}; export default class AnimatedCircularProgress extends React.Component { @@ -27,8 +37,7 @@ export default class AnimatedCircularProgress extends React.Component { this.state.chartFillAnimation, { toValue: this.props.fill, - tension: 7, - friction: 10 + ...speedMap[this.props.speed] } ).start(); } @@ -53,4 +62,9 @@ AnimatedCircularProgress.propTypes = { width: PropTypes.number.isRequired, tintColor: PropTypes.string, backgroundColor: PropTypes.string, + speed: PropTypes.oneOf(['slow', 'fast']) } + +AnimatedCircularProgress.defaultProps = { + speed: 'fast' +};