Fix #176, code style

example/App.js

@@ -8,7 +8,7 @@ export default class App extends React.Component {
   state = {
     isMoving: false,
     pointsDelta: 0,
-    points: 325
+    points: 325,
   };
   componentWillMount() {
     this._panResponder = PanResponder.create({
@@ -34,31 +34,26 @@ export default class App extends React.Component {
         this.setState({
           isMoving: false,
           points: points > 0 ? Math.min(points, MAX_POINTS) : 0,
-          pointsDelta: 0
+          pointsDelta: 0,
         });
       },
     });
   }
 
   render() {
-    const fill = this.state.points / MAX_POINTS * 100;
+    const fill = (this.state.points / MAX_POINTS) * 100;
 
     return (
-      <View
-        style={styles.container}
-        {...this._panResponder.panHandlers}>
+      <View style={styles.container} {...this._panResponder.panHandlers}>
         <AnimatedCircularProgress
           size={200}
           width={3}
+          backgroundWidth={30}
           fill={fill}
           tintColor="#00e0ff"
           backgroundColor="#3d5875"
         >
-          {(fill) => (
-            <Text style={styles.points}>
-              { Math.round(MAX_POINTS * fill / 100) }
-            </Text>
-          )}
+          {fill => <Text style={styles.points}>{Math.round((MAX_POINTS * fill) / 100)}</Text>}
         </AnimatedCircularProgress>
 
         <AnimatedCircularProgress
@@ -85,8 +80,8 @@ export default class App extends React.Component {
         />
 
         <Text style={[styles.pointsDelta, this.state.isMoving && styles.pointsDeltaActive]}>
-          { this.state.pointsDelta >= 0 && '+' }
-          { this.state.pointsDelta }
+          {this.state.pointsDelta >= 0 && '+'}
+          {this.state.pointsDelta}
         </Text>
       </View>
     );
@@ -95,29 +90,24 @@ export default class App extends React.Component {
 
 const styles = StyleSheet.create({
   points: {
-    backgroundColor: 'transparent',
-    position: 'absolute',
-    top: 72,
-    left: 56,
-    width: 90,
     textAlign: 'center',
     color: '#7591af',
     fontSize: 50,
-    fontWeight: "100"
+    fontWeight: '100',
   },
   container: {
     flex: 1,
     justifyContent: 'space-between',
     alignItems: 'center',
     backgroundColor: '#152d44',
-    padding: 50
+    padding: 50,
   },
   pointsDelta: {
     color: '#4c6479',
     fontSize: 50,
-    fontWeight: "100"
+    fontWeight: '100',
   },
   pointsDeltaActive: {
     color: '#fff',
-  }
+  },
 });

src/CircularProgress.js

@@ -5,21 +5,18 @@ import { Svg, Path, G } from 'react-native-svg';
 
 export default class CircularProgress extends React.PureComponent {
   polarToCartesian(centerX, centerY, radius, angleInDegrees) {
-    var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
+    var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
     return {
-        x: centerX + (radius * Math.cos(angleInRadians)),
-        y: centerY + (radius * Math.sin(angleInRadians))
+      x: centerX + radius * Math.cos(angleInRadians),
+      y: centerY + radius * Math.sin(angleInRadians),
     };
   }
 
-  circlePath(x, y, radius, startAngle, endAngle){
+  circlePath(x, y, radius, startAngle, endAngle) {
     var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
     var end = this.polarToCartesian(x, y, radius, startAngle);
     var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-    var d = [
-        'M', start.x, start.y,
-        'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y
-    ];
+    var d = ['M', start.x, start.y, 'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y];
     return d.join(' ');
   }
 
@@ -40,31 +37,41 @@ export default class CircularProgress extends React.PureComponent {
       children,
     } = this.props;
 
-    const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, arcSweepAngle);
-    const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, arcSweepAngle * this.clampFill(fill) / 100);
-    const offset = size - (width * 2);
+    const maxWidthCircle = backgroundWidth ? Math.max(width, backgroundWidth) : width;
+
+    const backgroundPath = this.circlePath(
+      size / 2,
+      size / 2,
+      size / 2 - maxWidthCircle / 2,
+      0,
+      arcSweepAngle
+    );
+    const circlePath = this.circlePath(
+      size / 2,
+      size / 2,
+      size / 2 - maxWidthCircle / 2,
+      0,
+      (arcSweepAngle * this.clampFill(fill)) / 100
+    );
+    const offset = size - maxWidthCircle * 2;
 
     const childContainerStyle = {
       position: 'absolute',
-      left: width,
-      top: width,
+      left: maxWidthCircle,
+      top: maxWidthCircle,
       width: offset,
       height: offset,
       borderRadius: offset / 2,
       alignItems: 'center',
       justifyContent: 'center',
-      overflow: 'hidden'
+      overflow: 'hidden',
     };
 
     return (
       <View style={style}>
-        <Svg
-          width={size}
-          height={size}
-          style={{ backgroundColor: 'transparent' }}
-        >
-          <G rotation={rotation} originX={size/2} originY={size/2}>
-            { backgroundColor && (
+        <Svg width={size} height={size} style={{ backgroundColor: 'transparent' }}>
+          <G rotation={rotation} originX={size / 2} originY={size / 2}>
+            {backgroundColor && (
               <Path
                 d={backgroundPath}
                 stroke={backgroundColor}
@@ -84,11 +91,7 @@ export default class CircularProgress extends React.PureComponent {
             )}
           </G>
         </Svg>
-        {children && (
-          <View style={childContainerStyle}>
-            {children(fill)}
-          </View>
-        )}
+        {children && <View style={childContainerStyle}>{children(fill)}</View>}
       </View>
     );
   }
@@ -112,5 +115,5 @@ CircularProgress.defaultProps = {
   tintColor: 'black',
   rotation: 90,
   lineCap: 'butt',
-  arcSweepAngle: 360
+  arcSweepAngle: 360,
 };