Fix validation and use of pre-parsed svg defined colors on android.

Allow viewBox given as array of numbers

lib/extract/extractBrush.js

@@ -1,4 +1,5 @@
 import extractColor from './extractColor';
+import { Platform } from 'react-native';
 
 const urlIdPattern = /^url\(#(.+)\)$/;
 
@@ -7,7 +8,7 @@ const currentColorBrush = [2];
 export default function extractBrush(color) {
   if (typeof color === 'number') {
     if (color >>> 0 === color && color >= 0 && color <= 0xffffffff) {
-      return [0, color];
+      return [0, Platform.OS === 'android' ? color | 0x0 : color];
     }
   }
 

lib/extract/extractColor.js

@@ -156,17 +156,7 @@ for (const name in colorNames) {
     const r = color[0];
     const g = color[1];
     const b = color[2];
-
-    let int32Color = (0xff000000 | (r << 16) | (g << 8) | b) >>> 0;
-
-    if (Platform.OS === 'android') {
-      // Android use 32 bit *signed* integer to represent the color
-      // We utilize the fact that bitwise operations in JS also operates on
-      // signed 32 bit integers, so that we can use those to convert from
-      // *unsigned* to *signed* 32bit int that way.
-      int32Color = int32Color | 0x0;
-    }
-    colorNames[name] = int32Color;
+    colorNames[name] = (0xff000000 | (r << 16) | (g << 8) | b) >>> 0;
   }
 }
 Object.freeze(colorNames);
@@ -351,13 +341,11 @@ function rgbFromString(string) {
 
     rgb = colorNames[match[1]];
 
-    if (!rgb) {
+    if (!(typeof rgb === 'number')) {
       return null;
     }
 
-    rgb[3] = 1;
-
-    return rgb;
+    return Platform.OS === 'android' ? rgb | 0x0 : rgb;
   } else {
     return null;
   }
@@ -419,7 +407,7 @@ function colorFromString(string) {
 export default function extractColor(color) {
   if (typeof color === 'number') {
     if (color >>> 0 === color && color >= 0 && color <= 0xffffffff) {
-      return color;
+      return Platform.OS === 'android' ? color | 0x0 : color;
     }
     return null;
   }
@@ -442,12 +430,9 @@ export default function extractColor(color) {
       Math.round(b * 255)) >>>
     0;
 
-  if (Platform.OS === 'android') {
-    // Android use 32 bit *signed* integer to represent the color
-    // We utilize the fact that bitwise operations in JS also operates on
-    // signed 32 bit integers, so that we can use those to convert from
-    // *unsigned* to *signed* 32bit int that way.
-    int32Color = int32Color | 0x0;
-  }
-  return int32Color;
+  // Android use 32 bit *signed* integer to represent the color
+  // We utilize the fact that bitwise operations in JS also operates on
+  // signed 32 bit integers, so that we can use those to convert from
+  // *unsigned* to *signed* 32bit int that way.
+  return Platform.OS === 'android' ? int32Color | 0x0 : int32Color;
 }

lib/extract/extractFill.js

@@ -1,6 +1,7 @@
 import extractBrush from './extractBrush';
 import extractOpacity from './extractOpacity';
 import { colorNames } from './extractColor';
+import { Platform } from 'react-native';
 
 const fillRules = {
   evenodd: 0,
@@ -11,7 +12,10 @@ const fillProps = ['fill', 'fillOpacity', 'fillRule'];
 const numFillProps = fillProps.length;
 
 // default fill is black
-const defaultFill = [0, colorNames.black];
+const defaultFill = [
+  0,
+  Platform.OS === 'android' ? colorNames.black | 0x0 : colorNames.black,
+];
 
 export default function extractFill(props, styleProperties) {
   for (let i = 0; i < numFillProps; i++) {

lib/extract/extractTransform.js

@@ -17,38 +17,6 @@ function appendTransform(props) {
   );
 }
 
-export function transformToMatrix(props, transform) {
-  pooledMatrix.reset();
-  appendTransform(props);
-
-  if (transform) {
-    if (Array.isArray(transform)) {
-      if (typeof transform[0] === 'number') {
-        pooledMatrix.append(
-          transform[0],
-          transform[1],
-          transform[2],
-          transform[3],
-          transform[4],
-          transform[5],
-        );
-      }
-      // noop for react-native transform arrays, let animated handle them
-    } else if (typeof transform === 'string') {
-      try {
-        const t = transformParser.parse(transform);
-        pooledMatrix.append(t[0], t[3], t[1], t[4], t[2], t[5]);
-      } catch (e) {
-        console.error(e);
-      }
-    } else {
-      appendTransform(props2transform(transform));
-    }
-  }
-
-  return pooledMatrix.toArray();
-}
-
 function universal2axis(universal, axisX, axisY, defaultValue) {
   let x;
   let y;
@@ -102,6 +70,38 @@ export function props2transform(props) {
   };
 }
 
+export function transformToMatrix(props, transform) {
+  pooledMatrix.reset();
+  appendTransform(props);
+
+  if (transform) {
+    if (Array.isArray(transform)) {
+      if (typeof transform[0] === 'number') {
+        pooledMatrix.append(
+          transform[0],
+          transform[1],
+          transform[2],
+          transform[3],
+          transform[4],
+          transform[5],
+        );
+      }
+      // noop for react-native transform arrays, let animated handle them
+    } else if (typeof transform === 'string') {
+      try {
+        const t = transformParser.parse(transform);
+        pooledMatrix.append(t[0], t[3], t[1], t[4], t[2], t[5]);
+      } catch (e) {
+        console.error(e);
+      }
+    } else {
+      appendTransform(props2transform(transform));
+    }
+  }
+
+  return pooledMatrix.toArray();
+}
+
 const identity = [1, 0, 0, 1, 0, 0];
 
 export default function extractTransform(props) {

lib/extract/extractViewBox.js

@@ -29,10 +29,10 @@ export default function extractViewBox(props) {
     return null;
   }
 
-  const params = viewBox
-    .trim()
-    .split(spacesRegExp)
-    .map(Number);
+  const params = (Array.isArray(viewBox)
+    ? viewBox
+    : viewBox.trim().split(spacesRegExp)
+  ).map(Number);
 
   if (params.length !== 4 || params.some(isNaN)) {
     console.warn('Invalid `viewBox` prop:' + viewBox);