Merge pull request #120 from alarner/alarner/partial-arcs

Add support for partial arcs

README.md

@@ -86,6 +86,7 @@ You can configure the passing by following props:
 - **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))
 - **linecap** - the shape to be used at the ends of the circle. Possible values: butt (default), round or square. (see [here](https://developer.mozilla.org/en/docs/Web/SVG/Attribute/stroke-linecap))
+- **arcSweepAngle** - the angle that you want your arc to sweep in the case where you don't want a full circle. Default is 360.
 - **children(fill)** - you can pass function as a child to receive current fill
 - **onAnimationComplete** - you can pass a callback function that will be invoked when animation is complete. (see [here](https://facebook.github.io/react-native/docs/animated.html#working-with-animations))
 - **onLinearAnimationComplete** - you can pass a callback function that will be invoked when linear animation is complete. (see [here](https://facebook.github.io/react-native/docs/animated.html#working-with-animations))

src/CircularProgress.js

@@ -41,12 +41,13 @@ export default class CircularProgress extends React.Component {
       style,
       rotation,
       linecap,
+      arcSweepAngle,
       children
     } = this.props;
 
     const fill = this.extractFill(this.props.fill);
-    const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360 * .9999);
-    const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, (360 * .9999) * fill / 100);
+    const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, arcSweepAngle * .9999);
+    const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, (arcSweepAngle * .9999) * fill / 100);
     const offset = size - (width * 2);
 
     const childContainerStyle = {
@@ -73,6 +74,7 @@ export default class CircularProgress extends React.Component {
                 d={backgroundPath}
                 stroke={backgroundColor}
                 strokeWidth={backgroundWidth != null ? backgroundWidth : width}
+                strokeCap={linecap}
               />
             )}
             <Shape
@@ -103,6 +105,7 @@ CircularProgress.propTypes = {
   backgroundColor: PropTypes.string,
   rotation: PropTypes.number,
   linecap: PropTypes.string,
+  arcSweepAngle: PropTypes.number,
   children: PropTypes.func
 }
 
@@ -110,5 +113,6 @@ CircularProgress.defaultProps = {
   tintColor: 'black',
   backgroundColor: '#e4e4e4',
   rotation: 90,
-  linecap: 'butt'
+  linecap: 'butt',
+  arcSweepAngle: 360
 }