Make linecap configurable

README.md

@@ -72,6 +72,7 @@ You can configure the passing by following props:
 - **rotation** - by default, progress starts from the angle = 90⦝, you can change it by setting value from -360 to 360
 - **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))
 - **children(fill)** - you can pass function as a child to receive current fill
 
 

src/CircularProgress.js

@@ -32,7 +32,7 @@ export default class CircularProgress extends React.Component {
   }
 
   render() {
-    const { size, width, tintColor, backgroundColor, style, rotation, children } = this.props;
+    const { size, width, tintColor, backgroundColor, style, rotation, linecap, children } = this.props;
     const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360);
 
     const fill = this.extractFill(this.props.fill);
@@ -50,7 +50,7 @@ export default class CircularProgress extends React.Component {
             <Shape d={circlePath}
                    stroke={tintColor}
                    strokeWidth={width}
-                   strokeCap="butt"/>
+                   strokeCap={linecap}/>
           </Group>
         </Surface>
         {
@@ -69,11 +69,13 @@ CircularProgress.propTypes = {
   tintColor: PropTypes.string,
   backgroundColor: PropTypes.string,
   rotation: PropTypes.number,
+  linecap: PropTypes.string,
   children: PropTypes.func
 }
 
 CircularProgress.defaultProps = {
   tintColor: 'black',
   backgroundColor: '#e4e4e4',
-  rotation: 90
+  rotation: 90,
+  linecap: 'butt'
 }