Support 'transparent' bg-color. Fix #90

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))

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>
-  )
+    );
   }
 }
 

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 && (