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

Comparing version 0.0.4 to 0.0.5

package.json

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

README.md

@@ -62,2 +62,4 @@ # react-native-circular-progress
 - **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))
 - **children(fill)** - you can pass function as a child to receive current fill
@@ -64,0 +66,0 @@

src/AnimatedCircularProgress.js

@@ -1,6 +0,5 @@
-import React, { PropTypes, Animated } from 'react-native';
+import React, { View, PropTypes, Animated } from 'react-native';
 import CircularProgress from './CircularProgress';
 const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
 
-
 export default class AnimatedCircularProgress extends React.Component {
@@ -26,2 +25,4 @@
   animateFill() {
+    const { tension, friction } = this.props;
+
     Animated.spring(
@@ -31,4 +32,4 @@ this.state.chartFillAnimation,
         toValue: this.props.fill,
-        tension: 7,
-        friction: 10
+        tension,
+        friction
       }
@@ -51,3 +52,3 @@ ).start();
 AnimatedCircularProgress.propTypes = {
-  style: PropTypes.object,
+  style: View.propTypes.style,
   size: PropTypes.number.isRequired,
@@ -59,2 +60,9 @@ fill: PropTypes.number.isRequired,
   backgroundColor: PropTypes.string,
+  tension: PropTypes.number,
+  friction: PropTypes.number
 }
+
+AnimatedCircularProgress.defaultProps = {
+  tension: 7,
+  friction: 10
+};

src/CircularProgress.js

@@ -1,16 +0,21 @@
-import React, { View, PropTypes } from 'react-native';
+import React, { View, PropTypes, Platform } from 'react-native';
 import { Surface, Shape, Path, Group } from '../../react-native/Libraries/ART/ReactNativeART';
 import MetricsPath from 'art/metrics/path';
 
-
 export default class CircularProgress extends React.Component {
 
-  circlePath(cx, cy, r) {
+  circlePath(cx, cy, r, startDegree, endDegree) {
 
-    return Path()
-      .moveTo(cx, cx)
-      .move(r, 0)
-      .arc(r * -2, 0, r, r)
-      .arc(r * 2, 0, r, r)
-      .close();
+    let p = Path();
+    if (Platform.OS === 'ios') {
+      p.path.push(0, cx + r, cy);
+      p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, endDegree * Math.PI / 180, 1);
+    } else {
+      // For Android we have to resort to drawing low-level Path primitives, as ART does not support 
+      // arbitrary circle segments. It also does not support strokeDash.
+      // Furthermore, the ART implementation seems to be buggy/different than the iOS one.
+      // MoveTo is not needed on Android 
+      p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, (startDegree - endDegree) * Math.PI / 180, 0);
+    }
+    return p;
   }
@@ -30,5 +35,6 @@
     const { size, width, tintColor, backgroundColor, style, rotation, children } = this.props;
+    const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360);
 
-    const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2);
     const fill = this.extractFill(this.props.fill);
+    const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360 * fill / 100);
 
@@ -41,10 +47,9 @@ return (
           <Group rotation={rotation - 90} originX={size/2} originY={size/2}>
+            <Shape d={backgroundPath}
+                   stroke={backgroundColor}
+                   strokeWidth={width}/>
             <Shape d={circlePath}
-              stroke={backgroundColor}
-              strokeWidth={width} />
-            <Shape d={circlePath}
-              stroke={tintColor}
-              strokeCap="butt"
-              strokeDash={[(size - width) * Math.PI * fill / 100, 9999]}
-              strokeWidth={width} />
+                   stroke={tintColor}
+                   strokeWidth={width}
+                   strokeCap="butt"/>
           </Group>
@@ -61,3 +66,3 @@ </Surface>
 CircularProgress.propTypes = {
-  style: PropTypes.object,
+  style: View.propTypes.style,
   size: PropTypes.number.isRequired,
@@ -64,0 +69,0 @@ fill: PropTypes.number.isRequired,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

370067

increased by0.29%

Lines of code

126

increased by11.5%

Number of lines in readme file

81

increased by2.53%

No dependency changes