Merge pull request #2 from klaudialax/master

Adjustable size

Author: rudyhuynh

README.md

@@ -27,8 +27,9 @@ const App = () => {
 ````
 
 ## Props
- * percentage (default: 80) 
- * blankColor (default: "#eaeaea") 
+ * percentage (default: 80)
+ * blankColor (default: "#eaeaea")
  * donutColor (default: "#43cdcf")
  * fillColor (default: "white")
  * progressWidth (default: 35)
+ * size (default: 100)

src/CircularProgress.js

@@ -3,10 +3,6 @@ import {View, StyleSheet} from 'react-native'
 import Svg, {Path, Circle} from 'react-native-svg'
 
 const styles = StyleSheet.create({
-    base: {
-        width: 100,
-        height: 100
-    },
     textView: {
         position: 'absolute',
         top: 0, left: 0, bottom: 0, right: 0,
@@ -15,10 +11,10 @@ const styles = StyleSheet.create({
     }
 })
 
-function generateArc(percentage){
+function generateArc(percentage, radius){
     if (percentage === 100) percentage = 99.999
     const a = percentage*2*Math.PI/100 // angle (in radian) depends on percentage
-    const r = 50 // radius of the circle
+    const r = radius // radius of the circle
     var rx = r,
         ry = r,
         xAxisRotation = 0,
@@ -36,25 +32,27 @@ function generateArc(percentage){
 }
 
 const CircularProgress = ({
-    percentage = 40, 
-    blankColor = "#eaeaea", 
+    percentage = 40,
+    blankColor = "#eaeaea",
     donutColor = "#43cdcf",
     fillColor = "white",
     progressWidth = 35,
+    size = 100,
     children
 }) => {
-    return <View style={styles.base}>
-        <Svg width="100" height="100">
-            <Circle cx="50" cy="50" r="50" fill={blankColor}/>
-            <Path 
-                d={`M50 50 L50 0 ${generateArc(percentage)} Z`}
+    let half = size / 2;
+    return <View style={{width: size, height: size}}>
+        <Svg width={size} height={size}>
+            <Circle cx={half} cy={half} r={half} fill={blankColor}/>
+            <Path
+                d={`M${half} ${half} L${half} 0 ${generateArc(percentage, half)} Z`}
                 fill={donutColor}
             />
-            {<Circle cx="50" cy="50" r={progressWidth} fill={fillColor}/>}
+            {<Circle cx={half} cy={half} r={progressWidth} fill={fillColor}/>}
         </Svg>
         <View style={styles.textView}>
             {children}
         </View>
     </View>
 }
-export default CircularProgress
+export default CircularProgress