From 454048bd92a166b876d53ea227c6cff2cc43c41a Mon Sep 17 00:00:00 2001
From: Jacob Lauritzen <jacsebl@hotmail.com>
Date: Fri, 29 Dec 2017 10:18:22 +0100
Subject: [PATCH] Support 'transparent' bg-color. Fix #90

---
 README.md               |  2 +-
 example/App.js          | 10 ++++++----
 src/CircularProgress.js | 23 +++++++++++++++--------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 2413553..d499878 100644
--- a/README.md
+++ b/README.md
@@ -81,7 +81,7 @@ You can configure the passing by following props:
 - **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
+- **backgroundColor** - color of a background for progress line. Use 'transparent' to hide
 - **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))
diff --git a/example/App.js b/example/App.js
index 5fc063f..6a5879b 100644
--- a/example/App.js
+++ b/example/App.js
@@ -54,7 +54,8 @@ export default class Example extends React.Component {
           width={3}
           fill={fill}
           tintColor="#00e0ff"
-          backgroundColor="#3d5875">
+          backgroundColor="#3d5875"
+        >
           {
             (fill) => (
               <Text style={styles.points}>
@@ -70,7 +71,7 @@ export default class Example extends React.Component {
           backgroundWidth={5}
           fill={fill}
           tintColor="#00e0ff"
-          backgroundColor="#3d5875"
+          backgroundColor="transparent"
         />
 
         <AnimatedCircularProgress
@@ -80,14 +81,15 @@ export default class Example extends React.Component {
           tintColor="#00e0ff"
           onAnimationComplete={() => console.log('onAnimationComplete')}
           ref="circularProgress"
-          backgroundColor="#3d5875" />
+          backgroundColor="#3d5875"
+        />
 
         <Text style={[styles.pointsDelta, this.state.isMoving && styles.pointsDeltaActive]}>
           { this.state.pointsDelta >= 0 && '+' }
           { this.state.pointsDelta }
         </Text>
       </View>
-  )
+    );
   }
 }
 
diff --git a/src/CircularProgress.js b/src/CircularProgress.js
index 9a4ecbd..165cbe8 100644
--- a/src/CircularProgress.js
+++ b/src/CircularProgress.js
@@ -51,15 +51,22 @@ export default class CircularProgress extends React.Component {
       <View style={style}>
         <Surface
           width={size}
-          height={size}>
+          height={size}
+        >
           <Group rotation={rotation - 90} originX={size/2} originY={size/2}>
-            <Shape d={backgroundPath}
-                   stroke={backgroundColor}
-                   strokeWidth={backgroundWidth != null ? backgroundWidth : width}/>
-            <Shape d={circlePath}
-                   stroke={tintColor}
-                   strokeWidth={width}
-                   strokeCap={linecap}/>
+            { backgroundColor !== 'transparent' && (
+              <Shape
+                d={backgroundPath}
+                stroke={backgroundColor}
+                strokeWidth={backgroundWidth != null ? backgroundWidth : width}
+              />
+            )}
+            <Shape
+              d={circlePath}
+              stroke={tintColor}
+              strokeWidth={width}
+              strokeCap={linecap}
+            />
           </Group>
         </Surface>
         {children && (