fix gradients stops in a right order

android/src/main/java/com/horcrux/svg/RNSVGPathShadowNode.java

@@ -182,23 +182,15 @@ public class RNSVGPathShadowNode extends RNSVGVirtualNode {
    */
     private static void parseGradientStops(float[] value, int stopsCount, float[] stops, int[] stopsColors, int startColorsPosition) {
         int startStops = value.length - stopsCount;
-        int offset = 0;
         for (int i = 0; i < stopsCount; i++) {
-            int index;
+            int half = stopsCount / 2;
 
-            if (i % 2 == 0) {
+            stops[i] = value[startStops + (i < half ? i : (half + (stopsCount - i) - 1))];
-                index = i / 2;
-            } else {
-                index = stopsCount + offset - i;
-                offset++;
-            }
-
-            stops[i] = value[startStops + index];
             stopsColors[i] = Color.argb(
-                    (int) (value[startColorsPosition + 3 + index * 4] * 255),
+                    (int) (value[startColorsPosition + i * 4 + 3] * 255),
-                    (int) (value[startColorsPosition + index * 4] * 255),
+                    (int) (value[startColorsPosition + i * 4] * 255),
-                    (int) (value[startColorsPosition + 1 + index * 4] * 255),
+                    (int) (value[startColorsPosition + i * 4 + 1] * 255),
-                    (int) (value[startColorsPosition + 2 + index * 4] * 255));
+                    (int) (value[startColorsPosition + i * 4 + 2] * 255));
 
         }
     }

elements/LinearGradient.js

@@ -66,7 +66,6 @@ class LinearGradient extends Gradient{
                 );
             },
             function (stops, opacity) {
-                console.log(stopsOpacity(stops, opacity), ...gradientProps);
                 return new LinearGradientGenerator(stopsOpacity(stops, opacity), ...gradientProps);
             }
         );

ios/RNSVG.xcodeproj/project.pbxproj

@@ -10,8 +10,6 @@
 		0CF68B051AF0549300FF9E5C /* RNSVGGroup.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68ADE1AF0549300FF9E5C /* RNSVGGroup.m */; };
 		0CF68B061AF0549300FF9E5C /* RNSVGNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE01AF0549300FF9E5C /* RNSVGNode.m */; };
 		0CF68B071AF0549300FF9E5C /* RNSVGRenderable.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE21AF0549300FF9E5C /* RNSVGRenderable.m */; };
-		0CF68B081AF0549300FF9E5C /* RNSVGShape.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE41AF0549300FF9E5C /* RNSVGShape.m */; };
-		0CF68B091AF0549300FF9E5C /* RNSVGSurfaceView.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE61AF0549300FF9E5C /* RNSVGSurfaceView.m */; };
 		0CF68B0A1AF0549300FF9E5C /* RNSVGText.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE81AF0549300FF9E5C /* RNSVGText.m */; };
 		0CF68B0B1AF0549300FF9E5C /* RNSVGBrush.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AEC1AF0549300FF9E5C /* RNSVGBrush.m */; };
 		0CF68B0C1AF0549300FF9E5C /* RNSVGLinearGradient.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AEE1AF0549300FF9E5C /* RNSVGLinearGradient.m */; };
@@ -22,9 +20,11 @@
 		0CF68B111AF0549300FF9E5C /* RNSVGGroupManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AFA1AF0549300FF9E5C /* RNSVGGroupManager.m */; };
 		0CF68B121AF0549300FF9E5C /* RNSVGNodeManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AFC1AF0549300FF9E5C /* RNSVGNodeManager.m */; };
 		0CF68B131AF0549300FF9E5C /* RNSVGRenderableManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AFE1AF0549300FF9E5C /* RNSVGRenderableManager.m */; };
-		0CF68B141AF0549300FF9E5C /* RNSVGShapeManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B001AF0549300FF9E5C /* RNSVGShapeManager.m */; };
-		0CF68B151AF0549300FF9E5C /* RNSVGSurfaceViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B021AF0549300FF9E5C /* RNSVGSurfaceViewManager.m */; };
 		0CF68B161AF0549300FF9E5C /* RNSVGTextManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B041AF0549300FF9E5C /* RNSVGTextManager.m */; };
+		10A062FE1CC732020000CEEF /* RNSVGPathManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 10A062FB1CC732020000CEEF /* RNSVGPathManager.m */; };
+		10A062FF1CC732020000CEEF /* RNSVGSvgViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 10A062FD1CC732020000CEEF /* RNSVGSvgViewManager.m */; };
+		10A063041CC7320C0000CEEF /* RNSVGPath.m in Sources */ = {isa = PBXBuildFile; fileRef = 10A063011CC7320C0000CEEF /* RNSVGPath.m */; };
+		10A063051CC7320C0000CEEF /* RNSVGSvgView.m in Sources */ = {isa = PBXBuildFile; fileRef = 10A063031CC7320C0000CEEF /* RNSVGSvgView.m */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXCopyFilesBuildPhase section */
@@ -49,10 +49,6 @@
 		0CF68AE01AF0549300FF9E5C /* RNSVGNode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGNode.m; sourceTree = "<group>"; };
 		0CF68AE11AF0549300FF9E5C /* RNSVGRenderable.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGRenderable.h; sourceTree = "<group>"; };
 		0CF68AE21AF0549300FF9E5C /* RNSVGRenderable.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGRenderable.m; sourceTree = "<group>"; };
-		0CF68AE31AF0549300FF9E5C /* RNSVGShape.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGShape.h; sourceTree = "<group>"; };
-		0CF68AE41AF0549300FF9E5C /* RNSVGShape.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGShape.m; sourceTree = "<group>"; };
-		0CF68AE51AF0549300FF9E5C /* RNSVGSurfaceView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGSurfaceView.h; sourceTree = "<group>"; };
-		0CF68AE61AF0549300FF9E5C /* RNSVGSurfaceView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGSurfaceView.m; sourceTree = "<group>"; };
 		0CF68AE71AF0549300FF9E5C /* RNSVGText.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGText.h; sourceTree = "<group>"; };
 		0CF68AE81AF0549300FF9E5C /* RNSVGText.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGText.m; sourceTree = "<group>"; };
 		0CF68AE91AF0549300FF9E5C /* RNSVGTextFrame.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGTextFrame.h; sourceTree = "<group>"; };
@@ -74,12 +70,16 @@
 		0CF68AFC1AF0549300FF9E5C /* RNSVGNodeManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGNodeManager.m; sourceTree = "<group>"; };
 		0CF68AFD1AF0549300FF9E5C /* RNSVGRenderableManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGRenderableManager.h; sourceTree = "<group>"; };
 		0CF68AFE1AF0549300FF9E5C /* RNSVGRenderableManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGRenderableManager.m; sourceTree = "<group>"; };
-		0CF68AFF1AF0549300FF9E5C /* RNSVGShapeManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGShapeManager.h; sourceTree = "<group>"; };
-		0CF68B001AF0549300FF9E5C /* RNSVGShapeManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGShapeManager.m; sourceTree = "<group>"; };
-		0CF68B011AF0549300FF9E5C /* RNSVGSurfaceViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGSurfaceViewManager.h; sourceTree = "<group>"; };
-		0CF68B021AF0549300FF9E5C /* RNSVGSurfaceViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGSurfaceViewManager.m; sourceTree = "<group>"; };
 		0CF68B031AF0549300FF9E5C /* RNSVGTextManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGTextManager.h; sourceTree = "<group>"; };
 		0CF68B041AF0549300FF9E5C /* RNSVGTextManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGTextManager.m; sourceTree = "<group>"; };
+		10A062FA1CC732020000CEEF /* RNSVGPathManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGPathManager.h; sourceTree = "<group>"; };
+		10A062FB1CC732020000CEEF /* RNSVGPathManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGPathManager.m; sourceTree = "<group>"; };
+		10A062FC1CC732020000CEEF /* RNSVGSvgViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGSvgViewManager.h; sourceTree = "<group>"; };
+		10A062FD1CC732020000CEEF /* RNSVGSvgViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGSvgViewManager.m; sourceTree = "<group>"; };
+		10A063001CC7320C0000CEEF /* RNSVGPath.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGPath.h; sourceTree = "<group>"; };
+		10A063011CC7320C0000CEEF /* RNSVGPath.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGPath.m; sourceTree = "<group>"; };
+		10A063021CC7320C0000CEEF /* RNSVGSvgView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNSVGSvgView.h; sourceTree = "<group>"; };
+		10A063031CC7320C0000CEEF /* RNSVGSvgView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNSVGSvgView.m; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -104,12 +104,12 @@
 				0CF68ADE1AF0549300FF9E5C /* RNSVGGroup.m */,
 				0CF68ADF1AF0549300FF9E5C /* RNSVGNode.h */,
 				0CF68AE01AF0549300FF9E5C /* RNSVGNode.m */,
+				10A063001CC7320C0000CEEF /* RNSVGPath.h */,
+				10A063011CC7320C0000CEEF /* RNSVGPath.m */,
+				10A063021CC7320C0000CEEF /* RNSVGSvgView.h */,
+				10A063031CC7320C0000CEEF /* RNSVGSvgView.m */,
 				0CF68AE11AF0549300FF9E5C /* RNSVGRenderable.h */,
 				0CF68AE21AF0549300FF9E5C /* RNSVGRenderable.m */,
-				0CF68AE31AF0549300FF9E5C /* RNSVGShape.h */,
-				0CF68AE41AF0549300FF9E5C /* RNSVGShape.m */,
-				0CF68AE51AF0549300FF9E5C /* RNSVGSurfaceView.h */,
-				0CF68AE61AF0549300FF9E5C /* RNSVGSurfaceView.m */,
 				0CF68AE71AF0549300FF9E5C /* RNSVGText.h */,
 				0CF68AE81AF0549300FF9E5C /* RNSVGText.m */,
 				0CF68AE91AF0549300FF9E5C /* RNSVGTextFrame.h */,
@@ -147,16 +147,16 @@
 		0CF68AF81AF0549300FF9E5C /* ViewManagers */ = {
 			isa = PBXGroup;
 			children = (
+				10A062FA1CC732020000CEEF /* RNSVGPathManager.h */,
+				10A062FB1CC732020000CEEF /* RNSVGPathManager.m */,
+				10A062FC1CC732020000CEEF /* RNSVGSvgViewManager.h */,
+				10A062FD1CC732020000CEEF /* RNSVGSvgViewManager.m */,
 				0CF68AF91AF0549300FF9E5C /* RNSVGGroupManager.h */,
 				0CF68AFA1AF0549300FF9E5C /* RNSVGGroupManager.m */,
 				0CF68AFB1AF0549300FF9E5C /* RNSVGNodeManager.h */,
 				0CF68AFC1AF0549300FF9E5C /* RNSVGNodeManager.m */,
 				0CF68AFD1AF0549300FF9E5C /* RNSVGRenderableManager.h */,
 				0CF68AFE1AF0549300FF9E5C /* RNSVGRenderableManager.m */,
-				0CF68AFF1AF0549300FF9E5C /* RNSVGShapeManager.h */,
-				0CF68B001AF0549300FF9E5C /* RNSVGShapeManager.m */,
-				0CF68B011AF0549300FF9E5C /* RNSVGSurfaceViewManager.h */,
-				0CF68B021AF0549300FF9E5C /* RNSVGSurfaceViewManager.m */,
 				0CF68B031AF0549300FF9E5C /* RNSVGTextManager.h */,
 				0CF68B041AF0549300FF9E5C /* RNSVGTextManager.m */,
 			);
@@ -219,23 +219,23 @@
 			buildActionMask = 2147483647;
 			files = (
 				0CF68B161AF0549300FF9E5C /* RNSVGTextManager.m in Sources */,
+				10A063041CC7320C0000CEEF /* RNSVGPath.m in Sources */,
 				0CF68B111AF0549300FF9E5C /* RNSVGGroupManager.m in Sources */,
 				0CF68B0D1AF0549300FF9E5C /* RNSVGPattern.m in Sources */,
 				0CF68B0A1AF0549300FF9E5C /* RNSVGText.m in Sources */,
 				0CF68B121AF0549300FF9E5C /* RNSVGNodeManager.m in Sources */,
 				0CF68B051AF0549300FF9E5C /* RNSVGGroup.m in Sources */,
+				10A062FF1CC732020000CEEF /* RNSVGSvgViewManager.m in Sources */,
 				0CF68B131AF0549300FF9E5C /* RNSVGRenderableManager.m in Sources */,
-				0CF68B091AF0549300FF9E5C /* RNSVGSurfaceView.m in Sources */,
 				0CF68B0E1AF0549300FF9E5C /* RNSVGRadialGradient.m in Sources */,
-				0CF68B151AF0549300FF9E5C /* RNSVGSurfaceViewManager.m in Sources */,
+				10A063051CC7320C0000CEEF /* RNSVGSvgView.m in Sources */,
-				0CF68B081AF0549300FF9E5C /* RNSVGShape.m in Sources */,
 				0CF68B071AF0549300FF9E5C /* RNSVGRenderable.m in Sources */,
 				0CF68B101AF0549300FF9E5C /* RCTConvert+RNSVG.m in Sources */,
+				10A062FE1CC732020000CEEF /* RNSVGPathManager.m in Sources */,
 				0CF68B061AF0549300FF9E5C /* RNSVGNode.m in Sources */,
 				0CF68B0F1AF0549300FF9E5C /* RNSVGSolidColor.m in Sources */,
 				0CF68B0C1AF0549300FF9E5C /* RNSVGLinearGradient.m in Sources */,
 				0CF68B0B1AF0549300FF9E5C /* RNSVGBrush.m in Sources */,
-				0CF68B141AF0549300FF9E5C /* RNSVGShapeManager.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

lib/insertProcessor.js

@@ -1,4 +1,5 @@
 import Color from 'color';
+import _ from 'lodash';
 
 function insertColorIntoArray(color, targetArray, atIndex) {
     var c = new Color(color).rgbaArray();
@@ -8,30 +9,37 @@ function insertColorIntoArray(color, targetArray, atIndex) {
     targetArray[atIndex + 3] = c[3];
 }
 
-function insertColorsIntoArray(stops, targetArray, atIndex) {
+function insertColorsIntoArray(stops, targetArray, atIndex, reverse) {
-    var i = 0;
+    let i = 0;
+
     if ('length' in stops) {
         while (i < stops.length) {
             insertColorIntoArray(stops[i], targetArray, atIndex + i * 4);
             i++;
         }
     } else {
-        for (var offset in stops) {
+        let sorted = _.sortBy(_.map(stops, (value, key) => ({key, value})), 'key');
-            insertColorIntoArray(stops[offset], targetArray, atIndex + i * 4);
+        if (reverse) {
-            i++;
+            sorted.reverse();
         }
+
+        sorted.forEach(({value:stop}) => {
+            insertColorIntoArray(stop, targetArray, atIndex + i * 4);
+            i++;
+        });
     }
     return atIndex + i * 4;
 }
 
 function insertColorStopsIntoArray(stops, targetArray, atIndex) {
-    var lastIndex = insertColorsIntoArray(stops, targetArray, atIndex);
+    let lastIndex = insertColorsIntoArray(stops, targetArray, atIndex, false);
     insertOffsetsIntoArray(stops, targetArray, lastIndex, 1, false);
 }
 
 function insertOffsetsIntoArray(stops, targetArray, atIndex, multi, reverse) {
-    var offsetNumber;
+    let offsetNumber;
-    var i = 0;
+    let i = 0;
+    let arr = [];
     if ('length' in stops) {
         while (i < stops.length) {
             offsetNumber = i / (stops.length - 1) * multi;
@@ -39,18 +47,20 @@ function insertOffsetsIntoArray(stops, targetArray, atIndex, multi, reverse) {
             i++;
         }
     } else {
-        for (var offsetString in stops) {
+        _.forEach(stops, (stop, offsetString) => {
             offsetNumber = (+offsetString) * multi;
-            targetArray[atIndex + i] = reverse ? 1 - offsetNumber : offsetNumber;
+            arr.push(reverse ? 1 - offsetNumber : offsetNumber);
             i++;
-        }
+        });
+        arr.sort();
+        targetArray.splice(atIndex, 0, ...arr);
     }
     return atIndex + i;
 }
 
 function insertDoubleColorStopsIntoArray(stops, targetArray, atIndex) {
-    var lastIndex = insertColorsIntoArray(stops, targetArray, atIndex);
+    let lastIndex = insertColorsIntoArray(stops, targetArray, atIndex, false);
-    lastIndex = insertColorsIntoArray(stops, targetArray, lastIndex);
+    lastIndex = insertColorsIntoArray(stops, targetArray, lastIndex, true);
     lastIndex = insertOffsetsIntoArray(stops, targetArray, lastIndex, 0.5, false);
     insertOffsetsIntoArray(stops, targetArray, lastIndex, 0.5, true);
 }