react-native-circular-progress - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "react-native-circular-progress",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React Native component for creating animated, circular progress with ReactART",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -5,2 +5,4 @@ # react-native-circular-progress
 
+## Example app
+![image](screenshot.gif)
 
@@ -14,6 +16,6 @@ ## Installation
 
-Import CircularChart or AnimatedCircularChart.
+Import CircularProgress or AnimatedCircularProgress.
 
 ```js
-import { AnimatedCircularChart } from 'react-native-progress-chart';
+import { AnimatedCircularProgress } from 'react-native-circular-progress';
 ```
@@ -24,3 +26,3 @@
 ```jsx
-<AnimatedCircularChart
+<AnimatedCircularProgress
   size={120}
@@ -36,3 +38,3 @@ width={15}
 ```jsx
-<AnimatedCircularChart
+<AnimatedCircularProgress
   size={200}
@@ -50,3 +52,3 @@ width={3}
   }
-</AnimatedCircularChart>
+</AnimatedCircularProgress>
 ```
@@ -63,6 +65,7 @@
 - **backgroundColor** - color of a background for progress line
+- **rotation** - by default, progress starts from the angle = 90⦝, you can change it by setting value from -360 to 360
 - **children(fill)** - you can pass function as a child to receive current fill
 
 
-## Working example
+## Working example app
 
@@ -79,6 +82,3 @@ You can find working example in the `example` directory of this repository. You can run it by:
 
-## Screenshot of the example
-![image](screenshot.gif)
-
 ## Special thanks
 Special thanks to [Chalk+Chisel](http://chalkchisel.com) for creating working environment where people grow. This component was created for one of the projects we're working on.

src/CircularProgress.js

@@ -1,3 +0,3 @@
-import React, { View, PropTypes, ReactNativeART } from 'react-native';
-import { Surface, Shape } from '../../react-native/Libraries/ART/ReactNativeART';
+import React, { View, PropTypes } from 'react-native';
+import { Surface, Shape, Path, Group } from '../../react-native/Libraries/ART/ReactNativeART';
 import MetricsPath from 'art/metrics/path';
@@ -9,6 +9,9 @@
   circlePath(cx, cy, r) {
-    return `M ${cx} ${cy}`
-      + `m ${r}, 0`
-      + `a ${r},${r} 0 1,1 -${r * 2},0`
-      + `a ${r},${r} 0 1,1 ${r * 2},0`;
+
+    return Path()
+      .moveTo(cx, cx)
+      .move(r, 0)
+      .arc(r * -2, 0, r, r)
+      .arc(r * 2, 0, r, r)
+      .close();
   }
@@ -27,6 +30,5 @@
   render() {
-    const { size, width, tintColor, backgroundColor, style, children } = this.props;
+    const { size, width, tintColor, backgroundColor, style, rotation, children } = this.props;
 
     const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2);
-    const pathMetrics = MetricsPath(circlePath);
     const fill = this.extractFill(this.props.fill);
@@ -39,12 +41,14 @@
           height={size}>
-          <Shape d={circlePath}
-            stroke={backgroundColor}
-            strokeCap="butt"
-            strokeDash={[pathMetrics.length, 700]}
-            strokeWidth={width} />
-          <Shape d={circlePath}
-            stroke={tintColor}
-            strokeCap="butt"
-            strokeDash={[pathMetrics.length * fill / 100, 700]}
-            strokeWidth={width} />
+          <Group rotation={rotation - 90} originX={size/2} originY={size/2}>
+            <Shape d={circlePath}
+              stroke={backgroundColor}
+              strokeCap="butt"
+              strokeDash={[(size - width) * Math.PI, 700]}
+              strokeWidth={width} />
+            <Shape d={circlePath}
+              stroke={tintColor}
+              strokeCap="butt"
+              strokeDash={[(size - width) * Math.PI * fill / 100, 700]}
+              strokeWidth={width} />
+          </Group>
         </Surface>
@@ -66,2 +70,3 @@ {
   backgroundColor: PropTypes.string,
+  rotation: PropTypes.number,
   children: PropTypes.func
@@ -72,3 +77,4 @@ }
   tintColor: 'black',
-  backgroundColor: '#e4e4e4'
+  backgroundColor: '#e4e4e4',
+  rotation: 90
 }

No alert changes

Improved metrics

Total package byte prevSize

367803

0.07%

Lines of code

112

4.67%

No dependency changes