From 41385755154cdfe6beb79d5bffe1c2aaed8e38f1 Mon Sep 17 00:00:00 2001
From: Fidan Hakaj <fidan_188@hotmail.com>
Date: Wed, 12 Oct 2016 23:35:16 +0200
Subject: [PATCH] Make linecap configurable

---
 README.md               | 1 +
 src/CircularProgress.js | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index a9780f0..7c5cb41 100644
--- a/README.md
+++ b/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
 
 
diff --git a/src/CircularProgress.js b/src/CircularProgress.js
index c17350e..61eb36f 100644
--- a/src/CircularProgress.js
+++ b/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'
 }