Adds full android support #3 #20.

oblador · Sep 13, 2016 · 1bcd5cb · 1bcd5cb
1 parent f57be6e
commit 1bcd5cb
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 52 deletions.
diff --git a/Circle.js b/Circle.js
@@ -92,7 +92,6 @@ export default class ProgressCircle extends Component {
               radius={size / 2}
               startAngle={0}
               endAngle={(indeterminate ? 1.8 : 2) * Math.PI}
-              direction={direction}
               stroke={borderColor || color}
               strokeWidth={borderWidth} />) : false}
         </ART.Surface>

diff --git a/README.md b/README.md
@@ -4,15 +4,13 @@ Progress indicators and spinners for React Native using ReactART.
 
 ![progress-demo](https://cloud.githubusercontent.com/assets/378279/11212043/64fb1420-8d01-11e5-9ec0-5e175a837c62.gif)
 
-**Note: Full android support will come when ReactART is ported to android.**
-
 ## Installation
 
 `$ npm install react-native-progress --save`
 
 ### ReactART based components
 
-To use the `Pie` or `Circle` components, you need to include the ART library in your project. 
+To use the `Pie` or `Circle` components, you need to include the ART library in your project on iOS, for android it's already included. 
 
 #### For CocoaPod users:
 
@@ -100,17 +98,6 @@ All of the props under *Properties* in addition to the following:
 
 ## [Changelog](https://github.com/oblador/react-native-progress/releases)
 
-## Todo
- - [x] Progress bar
- - [x] Circular progress indicator
- - [x] Pie progress indicator
- - [x] Animation
- - [x] Indeterminate state
- - [x] Progress percentage text
- - [ ] Optional color change on success/failure
- - [x] Snail/rainbow style spinners
- - [ ] Safari style navigation progress bar
-
 ## Thanks
 
 To [Mandarin Drummond](https://github.com/MandarinConLaBarba) for giving me the NPM name. 

diff --git a/Shapes/Arc.js b/Shapes/Arc.js
@@ -12,7 +12,6 @@ const CIRCLE = Math.PI * 2;
 function makeArcPath(x, y, startAngleArg, endAngleArg, radius, direction) {
   let startAngle = startAngleArg;
   let endAngle = endAngleArg;
-  const arcMethod = direction === 'counter-clockwise' ? 'counterArc' : 'arc';
   if (endAngle - startAngle >= CIRCLE) {
     endAngle = CIRCLE + (endAngle % CIRCLE);
   } else {
@@ -21,31 +20,29 @@ function makeArcPath(x, y, startAngleArg, endAngleArg, radius, direction) {
   startAngle = startAngle % CIRCLE;
   const angle = startAngle > endAngle ? CIRCLE - startAngle + endAngle : endAngle - startAngle;
 
-
-  let path = ART.Path();
-
   if (angle >= CIRCLE) {
-    path
+    return ART.Path()
       .moveTo(x + radius, y)
-      [arcMethod](0, radius * 2, radius, radius)
-      [arcMethod](0, radius * -2, radius, radius)
+      .arc(0, radius * 2, radius, radius)
+      .arc(0, radius * -2, radius, radius)
       .close();
-  } else {
-    const directionFactor = direction === 'counter-clockwise' ? -1 : 1;
-    endAngle *= directionFactor;
-    startAngle *= directionFactor;
-    const startSine = Math.sin(startAngle);
-    const startCosine = Math.cos(startAngle);
-    const endSine = Math.sin(endAngle);
-    const endCosine = Math.cos(endAngle);
-    const deltaSine = endSine - startSine;
-    const deltaCosine = endCosine - startCosine;
-
-    path
-      .moveTo(x + radius * (1 + startSine), y + radius - radius * startCosine)
-      [arcMethod](radius * deltaSine, radius * -deltaCosine, radius, radius, angle > Math.PI);
   }
-  return path;
+
+  const directionFactor = direction === 'counter-clockwise' ? -1 : 1;
+  endAngle *= directionFactor;
+  startAngle *= directionFactor;
+  const startSine = Math.sin(startAngle);
+  const startCosine = Math.cos(startAngle);
+  const endSine = Math.sin(endAngle);
+  const endCosine = Math.cos(endAngle);
+  const deltaSine = endSine - startSine;
+  const deltaCosine = endCosine - startCosine;
+
+  const arcFlag = angle > Math.PI ? 1 : 0;
+  const reverseFlag = direction === 'counter-clockwise' ? 0 : 1;
+
+  return `M${x + radius * (1 + startSine)} ${y + radius - radius * startCosine}
+          A${radius} ${radius} 0 ${arcFlag} ${reverseFlag} ${x + radius * (1 + endSine)} ${y + radius - radius * endCosine}`;
 }
 
 export default class Arc extends Component {

diff --git a/Shapes/Sector.js b/Shapes/Sector.js
@@ -10,24 +10,25 @@ import { ART } from 'react-native';
 const CIRCLE = Math.PI * 2;
 
 function makeSectorPath(x, y, angle, radius) {
-  let path = ART.Path()
-    .moveTo(x, y)
-    .move(radius, 0);
-
   if (angle >= CIRCLE) {
-    path
+    return ART.Path()
+      .moveTo(x, y)
+      .move(radius, 0)
       .arc(0, radius * 2, radius, radius)
-      .arc(0, radius * -2, radius, radius);
-  } else {
-    const sine = Math.sin(angle);
-    const cosine = Math.cos(angle);
-
-    path
-      .arc(radius * sine, -radius * (cosine - 1), radius, radius, angle > Math.PI)
-      .line(-radius * sine, radius * cosine);
+      .arc(0, radius * -2, radius, radius)
+      .close();
   }
-  path.close();
-  return path;
+
+  const startAngle = Math.PI / 2 - angle;
+  const endAngle = Math.PI / 2;
+  const arcFlag = angle > Math.PI ? 1 : 0;
+  const centerX = x + radius;
+  const centerY = y + radius;
+
+  return `M${centerX} ${centerY}
+          L${centerX + Math.cos(startAngle) * radius} ${centerY - Math.sin(startAngle) * radius}
+          A${radius} ${radius} 0 ${arcFlag} 0 ${centerX + Math.cos(endAngle) * radius} ${centerY - Math.sin(endAngle) * radius}
+          L${centerX} ${centerY}`;
 }
 
 export default class Sector extends Component {