pass tension and speed as props

README.md

@@ -59,7 +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
-- **speed** - speed of the animation, either 'slow' or 'fast'
+- **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
 
 

src/AnimatedCircularProgress.js

@@ -2,17 +2,6 @@ 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 {
 
   constructor(props) {
@@ -33,11 +22,14 @@ export default class AnimatedCircularProgress extends React.Component {
   }
 
   animateFill() {
+    const { tension, friction } = this.props;
+
     Animated.spring(
       this.state.chartFillAnimation,
       {
         toValue: this.props.fill,
-        ...speedMap[this.props.speed]
+        tension,
+        friction
       }
     ).start();
   }
@@ -62,9 +54,11 @@ AnimatedCircularProgress.propTypes = {
   width: PropTypes.number.isRequired,
   tintColor: PropTypes.string,
   backgroundColor: PropTypes.string,
-  speed: PropTypes.oneOf(['slow', 'fast'])
+  tension: PropTypes.number,
+  friction: PropTypes.number
 }
 
 AnimatedCircularProgress.defaultProps = {
-  speed: 'fast'
+  tension: 7,
+  friction: 10
 };