Add strokeCap prop for Progress.Circle (#45)

* Add `strokeCap` prop for `Progress.Circle`

Changes: Allows for further customization of the `Progress.Circle` by adding a `strokeCap` prop, similar to the `Progress.CircleSnail` component.

* Add prop to Arc to allow for custom strokeCap

* Update project readme

Author: mikehobi

Circle.js

@@ -89,6 +89,7 @@ export class ProgressCircle extends Component {
       showsText,
       size,
       style,
+      strokeCap,
       textStyle,
       thickness,
       unfilledColor,
@@ -154,6 +155,7 @@ export class ProgressCircle extends Component {
               startAngle={0}
               endAngle={(indeterminate ? 1.8 : 2) * Math.PI}
               stroke={borderColor || color}
+              strokeCap={strokeCap}
               strokeWidth={border}
             />
           ) : false}

README.md

@@ -1,6 +1,6 @@
 # react-native-progress
 
-Progress indicators and spinners for React Native using ReactART. 
+Progress indicators and spinners for React Native using ReactART.
 
 ![progress-demo](https://cloud.githubusercontent.com/assets/378279/11212043/64fb1420-8d01-11e5-9ec0-5e175a837c62.gif)
 
@@ -10,7 +10,7 @@ Progress indicators and spinners for React Native using ReactART.
 
 ### ReactART based components
 
-To use the `Pie` or `Circle` components, you need to include the ART library in your project on iOS, for android it's already included. 
+To use the `Pie` or `Circle` components, you need to include the ART library in your project on iOS, for android it's already included.
 
 #### For CocoaPod users:
 
@@ -72,6 +72,7 @@ All of the props under *Properties* in addition to the following:
 |**`formatText(progress)`**|A function returning a string to be displayed for the textual representation. |*See source*|
 |**`textStyle`**|Styles for progress text, defaults to a same `color` as circle and `fontSize` proportional to `size` prop. |*None*|
 |**`direction`**|Direction of the circle `clockwise` or `counter-clockwise` |`clockwise`|
+|**`strokeCap`**|Stroke Cap style for the circle `butt`, `square` or `round` |`butt`|
 
 ### `Progress.Pie`
 
@@ -95,14 +96,14 @@ All of the props under *Properties* in addition to the following:
 
 ## Examples
 
-* [`Example` project bundled with this module](https://github.com/oblador/react-native-progress/tree/master/Example) 
+* [`Example` project bundled with this module](https://github.com/oblador/react-native-progress/tree/master/Example)
 * [react-native-image-progress](https://github.com/oblador/react-native-image-progress)
 
 ## [Changelog](https://github.com/oblador/react-native-progress/releases)
 
 ## Thanks
 
-To [Mandarin Drummond](https://github.com/MandarinConLaBarba) for giving me the NPM name. 
+To [Mandarin Drummond](https://github.com/MandarinConLaBarba) for giving me the NPM name.
 
 ## License
 

Shapes/Arc.js

@@ -49,13 +49,15 @@ export default class Arc extends Component {
       top: PropTypes.number,
       left: PropTypes.number,
     }),
+    strokeCap: PropTypes.string,
     strokeWidth: PropTypes.number,
     direction: PropTypes.oneOf(['clockwise', 'counter-clockwise']),
   };
 
   static defaultProps = {
     startAngle: 0,
     offset: { top: 0, left: 0 },
+    strokeCap: 'butt',
     strokeWidth: 0,
     direction: 'clockwise',
   };
@@ -67,6 +69,7 @@ export default class Arc extends Component {
       radius,
       offset,
       direction,
+      strokeCap,
       strokeWidth,
       ...restProps
     } = this.props;
@@ -83,7 +86,7 @@ export default class Arc extends Component {
     return (
       <ART.Shape
         d={path}
-        strokeCap="butt"
+        strokeCap={strokeCap}
         strokeWidth={strokeWidth}
         {...restProps}
       />