From 853eecc461c03ec6179aa02068f129b12e6abb0f Mon Sep 17 00:00:00 2001
From: Jesse Sessler <jesse.sessler@gmail.com>
Date: Thu, 4 Feb 2016 08:15:14 -0500
Subject: [PATCH 1/2] add speed prop

---
 README.md                       |  1 +
 src/AnimatedCircularProgress.js | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

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'
+};

From 8193e8a44952ec190718ed2d0fd9fc283a904291 Mon Sep 17 00:00:00 2001
From: Jesse Sessler <jesse.sessler@gmail.com>
Date: Fri, 5 Feb 2016 10:29:34 -0500
Subject: [PATCH 2/2] pass tension and speed as props

---
 README.md                       |  3 ++-
 src/AnimatedCircularProgress.js | 22 ++++++++--------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 5a35ba5..0013285 100644
--- a/README.md
+++ b/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
 
 
diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js
index b320205..c06da21 100644
--- a/src/AnimatedCircularProgress.js
+++ b/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
 };