Merge pull request #8 from regeda/master

Added prefill property

README.md

@@ -55,6 +55,7 @@ You can configure the passing by following props:
 - **size** – width and height of the circle
 - **width** - thickness of the line
 - **fill** - current, percentage fill (from 0 to 100)
+- **prefill** - percentage fill before the animation (from 0 to 100)
 - **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

src/AnimatedCircularProgress.js

@@ -5,10 +5,10 @@ const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
 
 export default class AnimatedCircularProgress extends React.Component {
 
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.state = {
-      chartFillAnimation: new Animated.Value(0)
+      chartFillAnimation: new Animated.Value(props.prefill || 0)
     }
   }
 
@@ -34,7 +34,7 @@ export default class AnimatedCircularProgress extends React.Component {
   }
 
   render() {
-    const { fill, ...other } = this.props;
+    const { fill, prefill, ...other } = this.props;
 
     return (
       <AnimatedProgress
@@ -49,7 +49,8 @@ AnimatedCircularProgress.propTypes = {
   style: PropTypes.object,
   size: PropTypes.number.isRequired,
   fill: PropTypes.number.isRequired,
+  prefill: PropTypes.number,
   width: PropTypes.number.isRequired,
   tintColor: PropTypes.string,
-  backgroundColor: PropTypes.string
+  backgroundColor: PropTypes.string,
 }