From 1b01381f28603d9dd3a65615d294bd7ccdf1df23 Mon Sep 17 00:00:00 2001
From: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
Date: Tue, 12 Apr 2022 13:47:21 +0200
Subject: [PATCH] feat: remove extractColor in favor of RN impl (#1726)

PR removing extractColor.ts in favor of using the processColor implementation straight from react-native. It should handle all the cases from the previous implementation and the cases with PlatformColor and DynamicColorIOS. Normally we would just send the returned value to the native side, but in react-native-svg, e.g. fill prop can have more values than just color, e.g. currentColor. Because of it, we cannot use UIColor on iOS, NSColor on macOS and customType="Color" on Android as a prop type there and therefore we need to prepare the custom values on the JS side. It is done by passing the prop as an array with specific first element. In case of colors, it is 0. (hopefully I understood the code right).
---
 Example/ios/Podfile.lock                      |   6 +-
 TestsExample/App.js                           |   5 +-
 TestsExample/ios/Podfile.lock                 |   6 +-
 .../src/{SampleTest.tsx => ColorTest.tsx}     |  21 +-
 TestsExample/src/Test1718.tsx                 |  18 +
 src/elements/Svg.tsx                          |   8 +-
 src/index.d.ts                                |  12 +-
 src/index.js.flow                             |   6 +-
 src/lib/extract/extractBrush.ts               |  33 +-
 src/lib/extract/extractColor.ts               | 446 ------------------
 src/lib/extract/extractFill.ts                |   4 +-
 src/lib/extract/extractGradient.ts            |   4 +-
 src/lib/extract/types.ts                      |  12 +-
 13 files changed, 63 insertions(+), 518 deletions(-)
 rename TestsExample/src/{SampleTest.tsx => ColorTest.tsx} (70%)
 create mode 100644 TestsExample/src/Test1718.tsx
 delete mode 100644 src/lib/extract/extractColor.ts

diff --git a/Example/ios/Podfile.lock b/Example/ios/Podfile.lock
index 7454e709..f18bf7b8 100644
--- a/Example/ios/Podfile.lock
+++ b/Example/ios/Podfile.lock
@@ -347,7 +347,7 @@ PODS:
     - React-jsi (= 0.68.0-rc.1)
     - React-logger (= 0.68.0-rc.1)
     - React-perflogger (= 0.68.0-rc.1)
-  - RNSVG (12.2.0):
+  - RNSVG (12.3.0):
     - React-Core
   - SocketRocket (0.6.0)
   - Yoga (1.14.0)
@@ -501,7 +501,7 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
   FBLazyVector: bcdeff523be9f87a135b7c6fde8736db94904716
-  FBReactNativeSpec: 0c3f104f594b34d7b3a923cd12e03b0d4e12eaf5
+  FBReactNativeSpec: c01fba40ea819e68030d0d9b9094a173b2a3d127
   Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0
   Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c
   Flipper-DoubleConversion: 57ffbe81ef95306cc9e69c4aa3aeeeeb58a6a28c
@@ -540,7 +540,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 5cab6419b68d5750482b0fc34dbb27af550469cc
   React-runtimeexecutor: 10cda3a396b14a764a5f86088e7e3810b9c66cec
   ReactCommon: 73a01eb83f22c84a6b09dfb60f3463888ebd4975
-  RNSVG: 4ecc2e8f38b6ebe7889909570c26f3abe8059767
+  RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: d29dba374c1a582b40cfb736647b5e1b5ed35dba
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
diff --git a/TestsExample/App.js b/TestsExample/App.js
index c04945c0..a9b77ac2 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -1,7 +1,8 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
-import SampleTest from './src/SampleTest';
+import ColorTest from './src/ColorTest';
+import Test1718 from './src/Test1718';
 
 export default function App() {
-  return <SampleTest />;
+  return <ColorTest />;
 }
diff --git a/TestsExample/ios/Podfile.lock b/TestsExample/ios/Podfile.lock
index 4f282bdf..94cc3bac 100644
--- a/TestsExample/ios/Podfile.lock
+++ b/TestsExample/ios/Podfile.lock
@@ -347,7 +347,7 @@ PODS:
     - React-jsi (= 0.68.0-rc.1)
     - React-logger (= 0.68.0-rc.1)
     - React-perflogger (= 0.68.0-rc.1)
-  - RNSVG (12.2.0):
+  - RNSVG (12.3.0):
     - React-Core
   - SocketRocket (0.6.0)
   - Yoga (1.14.0)
@@ -501,7 +501,7 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
   FBLazyVector: bcdeff523be9f87a135b7c6fde8736db94904716
-  FBReactNativeSpec: 96fb2991e5748dcf1c627822cbf41253f1fffe31
+  FBReactNativeSpec: 137186498f03934daf999cec565fbc3d291f294c
   Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0
   Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c
   Flipper-DoubleConversion: 57ffbe81ef95306cc9e69c4aa3aeeeeb58a6a28c
@@ -540,7 +540,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 5cab6419b68d5750482b0fc34dbb27af550469cc
   React-runtimeexecutor: 10cda3a396b14a764a5f86088e7e3810b9c66cec
   ReactCommon: 73a01eb83f22c84a6b09dfb60f3463888ebd4975
-  RNSVG: 4ecc2e8f38b6ebe7889909570c26f3abe8059767
+  RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: d29dba374c1a582b40cfb736647b5e1b5ed35dba
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
diff --git a/TestsExample/src/SampleTest.tsx b/TestsExample/src/ColorTest.tsx
similarity index 70%
rename from TestsExample/src/SampleTest.tsx
rename to TestsExample/src/ColorTest.tsx
index 95db448c..d28792a0 100644
--- a/TestsExample/src/SampleTest.tsx
+++ b/TestsExample/src/ColorTest.tsx
@@ -1,23 +1,28 @@
 import React from 'react';
-import { PlatformColor, Platform, Button } from 'react-native';
+import { PlatformColor, Platform, Button, DynamicColorIOS } from 'react-native';
 import {
   Svg,
   Circle,
   Rect,
   Text,
   TSpan,
-  SvgUri
 } from 'react-native-svg';
 
 const color = PlatformColor(Platform.select({
-  ios: 'label',
-  android: '@android:color/primary_text_light',
+  ios: 'systemTealColor',
+  android: '@android:color/holo_blue_bright',
   default: 'black',
 }))
 
+// const customContrastDynamicTextColor = DynamicColorIOS({
+//   dark: 'hsla(360, 40%, 30%, 1.0)',
+//   light: '#ff00ff55',
+//   highContrastDark: 'black',
+//   highContrastLight: 'white',
+// });
+
 export default () => {
   const [test, setTest] = React.useState(50);
-  const [uri, setUri] = React.useState('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/not_existing.svg')
 
   return (
     <>
@@ -46,12 +51,6 @@ export default () => {
         </Text>
       </Svg>
       <Button title="Click me" onPress={()=> setTest(test + 1)}/>
-      <SvgUri
-        onError={() => setUri('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg')}
-        width="100"
-        height="100"
-        uri={uri}
-      />
     </>
   );
 }
diff --git a/TestsExample/src/Test1718.tsx b/TestsExample/src/Test1718.tsx
new file mode 100644
index 00000000..c7d44e16
--- /dev/null
+++ b/TestsExample/src/Test1718.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { SvgUri } from 'react-native-svg';
+
+
+export default () => {
+  const [uri, setUri] = React.useState('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/not_existing.svg')
+
+  return (
+    <>
+      <SvgUri
+        onError={() => setUri('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg')}
+        width="100"
+        height="100"
+        uri={uri}
+      />
+    </>
+  );
+}
diff --git a/src/elements/Svg.tsx b/src/elements/Svg.tsx
index 5a718b12..15286d07 100644
--- a/src/elements/Svg.tsx
+++ b/src/elements/Svg.tsx
@@ -1,16 +1,17 @@
 import React, { Component } from 'react';
 import {
+  ColorValue,
   findNodeHandle,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
   NativeModules,
+  processColor,
   StyleSheet,
   ViewStyle,
 } from 'react-native';
 import {
   ClipProps,
-  Color,
   extractedProps,
   FillProps,
   NumberProp,
@@ -21,7 +22,6 @@ import {
 } from '../lib/extract/types';
 import extractResponder from '../lib/extract/extractResponder';
 import extractViewBox from '../lib/extract/extractViewBox';
-import extractColor from '../lib/extract/extractColor';
 import Shape from './Shape';
 import G from './G';
 import { RNSVGSvg } from './NativeComponents';
@@ -38,7 +38,7 @@ const defaultStyle = styles.svg;
 
 export default class Svg extends Shape<
   {
-    color?: Color;
+    color?: ColorValue;
     viewBox?: string;
     opacity?: NumberProp;
     onLayout?: () => void;
@@ -183,7 +183,7 @@ export default class Svg extends Shape<
 
     extractResponder(props, props, this as ResponderInstanceProps);
 
-    const tint = extractColor(color);
+    const tint = processColor(color);
     if (tint != null) {
       props.color = tint;
       props.tintColor = tint;
diff --git a/src/index.d.ts b/src/index.d.ts
index f58b6eef..2488ff31 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import * as ReactNative from 'react-native';
 import {
+  ColorValue,
   GestureResponderEvent,
   TransformsStyle,
-  OpaqueColorValue,
 } from 'react-native';
 
 // Common props
@@ -97,15 +97,7 @@ export interface ResponderProps extends ReactNative.GestureResponderHandlers {
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
 }
 
-// rgba values inside range 0 to 1 inclusive
-// rgbaArray = [r, g, b, a]
-export type rgbaArray = ReadonlyArray<number>;
-
-// argb values inside range 0x00 to 0xff inclusive
-// int32ARGBColor = 0xaarrggbb
-export type int32ARGBColor = number;
-
-export type Color = int32ARGBColor | rgbaArray | OpaqueColorValue | string;
+export type Color = ColorValue;
 
 export interface FillProps {
   fill?: Color;
diff --git a/src/index.js.flow b/src/index.js.flow
index ed8ad2c4..91068ab3 100644
--- a/src/index.js.flow
+++ b/src/index.js.flow
@@ -7,9 +7,9 @@
 import * as React from "react";
 import * as ReactNative from "react-native";
 import {
+  ColorValue,
   GestureResponderEvent,
   TransformsStyle,
-  OpaqueColorValue,
 } from "react-native";
 export type NumberProp = string | number;
 export type NumberArray = NumberProp[] | NumberProp;
@@ -95,9 +95,7 @@ export type ResponderProps = {
   pointerEvents?: "box-none" | "none" | "box-only" | "auto",
   ...
 } & ReactNative.GestureResponderHandlers;
-export type rgbaArray = $ReadOnlyArray<number>;
-export type int32ARGBColor = number;
-export type Color = int32ARGBColor | rgbaArray | OpaqueColorValue | string;
+export type Color = ColorValue;
 export interface FillProps {
   fill?: Color;
   fillOpacity?: NumberProp;
diff --git a/src/lib/extract/extractBrush.ts b/src/lib/extract/extractBrush.ts
index b6c29eb7..3b592a27 100644
--- a/src/lib/extract/extractBrush.ts
+++ b/src/lib/extract/extractBrush.ts
@@ -1,5 +1,4 @@
-import extractColor, { integerColor } from './extractColor';
-import { Color } from './types';
+import { ColorValue, processColor } from 'react-native';
 
 const urlIdPattern = /^url\(#(.+)\)$/;
 
@@ -7,12 +6,7 @@ const currentColorBrush = [2];
 const contextFillBrush = [3];
 const contextStrokeBrush = [4];
 
-export default function extractBrush(color?: Color) {
-  if (typeof color === 'number') {
-    if (color >>> 0 === color && color >= 0 && color <= 0xffffffff) {
-      return integerColor(color);
-    }
-  }
+export default function extractBrush(color?: ColorValue) {
 
   if (!color || color === 'none') {
     return null;
@@ -35,23 +29,18 @@ export default function extractBrush(color?: Color) {
     return [1, brush[1]];
   }
 
-  const int32ARGBColor = extractColor(color);
-  if (typeof int32ARGBColor === 'number') {
-    return int32ARGBColor;
+  const processedColor = processColor(color);
+  if (typeof processedColor === 'number') {
+    return processedColor;
   }
 
-  if (typeof color === 'object' && color !== null) {
-    // iOS PlatformColor
-    if ('semantic' in color) {
-      return [0, color];
-    }
-
-    // Android PlatformColor
-    if ('resource_paths' in color) {
-      return [0, color];
-    }
+  if (typeof processedColor === 'object' && processedColor !== null) {
+    // if we got an object, it should be `PlatformColor` or `DynamicColorIOS`,
+    // so we pass it as an array with `0` value as first item, which is interpreted
+    // on the native side as color to be managed by `RCTConvert`.
+    return [0, processedColor];
   }
 
-  console.warn(`"${color}" is not a valid color or brush`);
+  console.warn(`"${String(color)}" is not a valid color or brush`);
   return null;
 }
diff --git a/src/lib/extract/extractColor.ts b/src/lib/extract/extractColor.ts
deleted file mode 100644
index 96261f3e..00000000
--- a/src/lib/extract/extractColor.ts
+++ /dev/null
@@ -1,446 +0,0 @@
-import { Platform } from 'react-native';
-import { Color } from './types';
-
-export const colors: { [colorname: string]: number[] } = {
-  aliceblue: [240, 248, 255],
-  antiquewhite: [250, 235, 215],
-  aqua: [0, 255, 255],
-  aquamarine: [127, 255, 212],
-  azure: [240, 255, 255],
-  beige: [245, 245, 220],
-  bisque: [255, 228, 196],
-  black: [0, 0, 0],
-  blanchedalmond: [255, 235, 205],
-  blue: [0, 0, 255],
-  blueviolet: [138, 43, 226],
-  brown: [165, 42, 42],
-  burlywood: [222, 184, 135],
-  cadetblue: [95, 158, 160],
-  chartreuse: [127, 255, 0],
-  chocolate: [210, 105, 30],
-  coral: [255, 127, 80],
-  cornflowerblue: [100, 149, 237],
-  cornsilk: [255, 248, 220],
-  crimson: [220, 20, 60],
-  cyan: [0, 255, 255],
-  darkblue: [0, 0, 139],
-  darkcyan: [0, 139, 139],
-  darkgoldenrod: [184, 134, 11],
-  darkgray: [169, 169, 169],
-  darkgreen: [0, 100, 0],
-  darkgrey: [169, 169, 169],
-  darkkhaki: [189, 183, 107],
-  darkmagenta: [139, 0, 139],
-  darkolivegreen: [85, 107, 47],
-  darkorange: [255, 140, 0],
-  darkorchid: [153, 50, 204],
-  darkred: [139, 0, 0],
-  darksalmon: [233, 150, 122],
-  darkseagreen: [143, 188, 143],
-  darkslateblue: [72, 61, 139],
-  darkslategray: [47, 79, 79],
-  darkslategrey: [47, 79, 79],
-  darkturquoise: [0, 206, 209],
-  darkviolet: [148, 0, 211],
-  deeppink: [255, 20, 147],
-  deepskyblue: [0, 191, 255],
-  dimgray: [105, 105, 105],
-  dimgrey: [105, 105, 105],
-  dodgerblue: [30, 144, 255],
-  firebrick: [178, 34, 34],
-  floralwhite: [255, 250, 240],
-  forestgreen: [34, 139, 34],
-  fuchsia: [255, 0, 255],
-  gainsboro: [220, 220, 220],
-  ghostwhite: [248, 248, 255],
-  gold: [255, 215, 0],
-  goldenrod: [218, 165, 32],
-  gray: [128, 128, 128],
-  green: [0, 128, 0],
-  greenyellow: [173, 255, 47],
-  grey: [128, 128, 128],
-  honeydew: [240, 255, 240],
-  hotpink: [255, 105, 180],
-  indianred: [205, 92, 92],
-  indigo: [75, 0, 130],
-  ivory: [255, 255, 240],
-  khaki: [240, 230, 140],
-  lavender: [230, 230, 250],
-  lavenderblush: [255, 240, 245],
-  lawngreen: [124, 252, 0],
-  lemonchiffon: [255, 250, 205],
-  lightblue: [173, 216, 230],
-  lightcoral: [240, 128, 128],
-  lightcyan: [224, 255, 255],
-  lightgoldenrodyellow: [250, 250, 210],
-  lightgray: [211, 211, 211],
-  lightgreen: [144, 238, 144],
-  lightgrey: [211, 211, 211],
-  lightpink: [255, 182, 193],
-  lightsalmon: [255, 160, 122],
-  lightseagreen: [32, 178, 170],
-  lightskyblue: [135, 206, 250],
-  lightslategray: [119, 136, 153],
-  lightslategrey: [119, 136, 153],
-  lightsteelblue: [176, 196, 222],
-  lightyellow: [255, 255, 224],
-  lime: [0, 255, 0],
-  limegreen: [50, 205, 50],
-  linen: [250, 240, 230],
-  magenta: [255, 0, 255],
-  maroon: [128, 0, 0],
-  mediumaquamarine: [102, 205, 170],
-  mediumblue: [0, 0, 205],
-  mediumorchid: [186, 85, 211],
-  mediumpurple: [147, 112, 219],
-  mediumseagreen: [60, 179, 113],
-  mediumslateblue: [123, 104, 238],
-  mediumspringgreen: [0, 250, 154],
-  mediumturquoise: [72, 209, 204],
-  mediumvioletred: [199, 21, 133],
-  midnightblue: [25, 25, 112],
-  mintcream: [245, 255, 250],
-  mistyrose: [255, 228, 225],
-  moccasin: [255, 228, 181],
-  navajowhite: [255, 222, 173],
-  navy: [0, 0, 128],
-  oldlace: [253, 245, 230],
-  olive: [128, 128, 0],
-  olivedrab: [107, 142, 35],
-  orange: [255, 165, 0],
-  orangered: [255, 69, 0],
-  orchid: [218, 112, 214],
-  palegoldenrod: [238, 232, 170],
-  palegreen: [152, 251, 152],
-  paleturquoise: [175, 238, 238],
-  palevioletred: [219, 112, 147],
-  papayawhip: [255, 239, 213],
-  peachpuff: [255, 218, 185],
-  peru: [205, 133, 63],
-  pink: [255, 192, 203],
-  plum: [221, 160, 221],
-  powderblue: [176, 224, 230],
-  purple: [128, 0, 128],
-  rebeccapurple: [102, 51, 153],
-  red: [255, 0, 0],
-  rosybrown: [188, 143, 143],
-  royalblue: [65, 105, 225],
-  saddlebrown: [139, 69, 19],
-  salmon: [250, 128, 114],
-  sandybrown: [244, 164, 96],
-  seagreen: [46, 139, 87],
-  seashell: [255, 245, 238],
-  sienna: [160, 82, 45],
-  silver: [192, 192, 192],
-  skyblue: [135, 206, 235],
-  slateblue: [106, 90, 205],
-  slategray: [112, 128, 144],
-  slategrey: [112, 128, 144],
-  snow: [255, 250, 250],
-  springgreen: [0, 255, 127],
-  steelblue: [70, 130, 180],
-  tan: [210, 180, 140],
-  teal: [0, 128, 128],
-  thistle: [216, 191, 216],
-  tomato: [255, 99, 71],
-  turquoise: [64, 224, 208],
-  violet: [238, 130, 238],
-  wheat: [245, 222, 179],
-  white: [255, 255, 255],
-  whitesmoke: [245, 245, 245],
-  yellow: [255, 255, 0],
-  yellowgreen: [154, 205, 50],
-};
-export const colorNames: { [colorname: string]: number | void } = {};
-for (const name in colors) {
-  if (colors.hasOwnProperty(name)) {
-    const color: number[] = colors[name];
-    const r = color[0];
-    const g = color[1];
-    const b = color[2];
-    colorNames[name] = (0xff000000 | (r << 16) | (g << 8) | b) >>> 0;
-  }
-}
-Object.freeze(colorNames);
-
-function hslToRgb(_h: number, _s: number, _l: number, a: number) {
-  const h = _h / 360;
-  const s = _s / 100;
-  const l = _l / 100;
-  let t1;
-  let t2;
-  let t3;
-  let rgb;
-  let val;
-
-  if (s === 0) {
-    val = l;
-    return [val, val, val, a];
-  }
-
-  if (l < 0.5) {
-    t2 = l * (1 + s);
-  } else {
-    t2 = l + s - l * s;
-  }
-
-  t1 = 2 * l - t2;
-
-  rgb = [0, 0, 0, a];
-  for (let i = 0; i < 3; i++) {
-    t3 = h + (1 / 3) * -(i - 1);
-    if (t3 < 0) {
-      t3++;
-    }
-    if (t3 > 1) {
-      t3--;
-    }
-
-    if (6 * t3 < 1) {
-      val = t1 + (t2 - t1) * 6 * t3;
-    } else if (2 * t3 < 1) {
-      val = t2;
-    } else if (3 * t3 < 2) {
-      val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
-    } else {
-      val = t1;
-    }
-
-    rgb[i] = val;
-  }
-
-  return rgb;
-}
-
-function hwbToRgb(_h: number, _w: number, _b: number, a: number) {
-  const h = _h / 360;
-  let wh = _w / 100;
-  let bl = _b / 100;
-  const ratio = wh + bl;
-  let i;
-  let v;
-  let f;
-  let n;
-
-  // wh + bl cant be > 1
-  if (ratio > 1) {
-    wh /= ratio;
-    bl /= ratio;
-  }
-
-  i = Math.floor(6 * h);
-  v = 1 - bl;
-  f = 6 * h - i;
-
-  if ((i & 0x01) !== 0) {
-    f = 1 - f;
-  }
-
-  n = wh + f * (v - wh); // linear interpolation
-
-  let r;
-  let g;
-  let b;
-  switch (i) {
-    default:
-    case 6:
-    case 0:
-      r = v;
-      g = n;
-      b = wh;
-      break;
-    case 1:
-      r = n;
-      g = v;
-      b = wh;
-      break;
-    case 2:
-      r = wh;
-      g = v;
-      b = n;
-      break;
-    case 3:
-      r = wh;
-      g = n;
-      b = v;
-      break;
-    case 4:
-      r = n;
-      g = wh;
-      b = v;
-      break;
-    case 5:
-      r = v;
-      g = wh;
-      b = n;
-      break;
-  }
-
-  return [r, g, b, a];
-}
-
-function clamp(num: number, min: number, max: number) {
-  return Math.min(Math.max(min, num), max);
-}
-
-const abbr = /^#([a-f0-9]{3,4})$/i;
-const hex = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i;
-const rgba = /^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d.]+)\s*)?\)$/;
-const per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,\s*([+-]?[\d.]+)%\s*,\s*([+-]?[\d.]+)%\s*(?:,\s*([+-]?[\d.]+)\s*)?\)$/;
-const keyword = /(\D+)/;
-
-function rgbFromString(string: string) {
-  let rgb = [0, 0, 0, 1];
-  let match;
-  let i;
-  let hexAlpha;
-
-  if ((match = string.match(hex))) {
-    hexAlpha = match[2];
-    match = match[1];
-
-    for (i = 0; i < 3; i++) {
-      // https://jsperf.com/slice-vs-substr-vs-substring-methods-long-string/19
-      const i2 = i * 2;
-      rgb[i] = parseInt(match.slice(i2, i2 + 2), 16) / 255;
-    }
-
-    if (hexAlpha) {
-      rgb[3] = Math.round((parseInt(hexAlpha, 16) / 255) * 100) / 100;
-    }
-  } else if ((match = string.match(abbr))) {
-    match = match[1];
-    hexAlpha = match[3];
-
-    for (i = 0; i < 3; i++) {
-      rgb[i] = parseInt(match[i] + match[i], 16) / 255;
-    }
-
-    if (hexAlpha) {
-      rgb[3] =
-        Math.round((parseInt(hexAlpha + hexAlpha, 16) / 255) * 100) / 100;
-    }
-  } else if ((match = string.match(rgba))) {
-    for (i = 0; i < 3; i++) {
-      rgb[i] = parseInt(match[i + 1], 0) / 255;
-    }
-
-    if (match[4]) {
-      rgb[3] = parseFloat(match[4]);
-    }
-  } else if ((match = string.match(per))) {
-    for (i = 0; i < 3; i++) {
-      rgb[i] = parseFloat(match[i + 1]) / 100;
-    }
-
-    if (match[4]) {
-      rgb[3] = parseFloat(match[4]);
-    }
-  } else if ((match = string.match(keyword))) {
-    if (match[1] === 'transparent') {
-      return [0, 0, 0, 0];
-    }
-
-    let color = colorNames[match[1]];
-
-    if (!(typeof color === 'number')) {
-      return null;
-    }
-
-    return integerColor(color);
-  } else {
-    return null;
-  }
-
-  for (i = 0; i < 4; i++) {
-    rgb[i] = clamp(rgb[i], 0, 1);
-  }
-
-  return rgb;
-}
-
-const hslRegEx = /^hsla?\(\s*([+-]?(?:\d*\.)?\d+)(?:deg)?\s*,\s*([+-]?[\d.]+)%\s*,\s*([+-]?[\d.]+)%\s*(?:,\s*([+-]?[\d.]+)\s*)?\)$/;
-
-function rgbFromHslString(string: string) {
-  const match = string.match(hslRegEx);
-  if (!match) {
-    return null;
-  }
-
-  const alpha = parseFloat(match[4]);
-  const h = (parseFloat(match[1]) + 360) % 360;
-  const s = clamp(parseFloat(match[2]), 0, 100);
-  const l = clamp(parseFloat(match[3]), 0, 100);
-  const a = isNaN(alpha) ? 1 : clamp(alpha, 0, 1);
-  return hslToRgb(h, s, l, a);
-}
-
-const hwbRegEx = /^hwb\(\s*([+-]?\d*[.]?\d+)(?:deg)?\s*,\s*([+-]?[\d.]+)%\s*,\s*([+-]?[\d.]+)%\s*(?:,\s*([+-]?[\d.]+)\s*)?\)$/;
-
-function rgbFromHwbString(string: string) {
-  const match = string.match(hwbRegEx);
-  if (!match) {
-    return null;
-  }
-
-  const alpha = parseFloat(match[4]);
-  const h = ((parseFloat(match[1]) % 360) + 360) % 360;
-  const w = clamp(parseFloat(match[2]), 0, 100);
-  const b = clamp(parseFloat(match[3]), 0, 100);
-  const a = isNaN(alpha) ? 1 : clamp(alpha, 0, 1);
-  return hwbToRgb(h, w, b, a);
-}
-
-function colorFromString(string: string) {
-  const prefix = string.substring(0, 3).toLowerCase();
-
-  switch (prefix) {
-    case 'hsl':
-      return rgbFromHslString(string);
-    case 'hwb':
-      return rgbFromHwbString(string);
-    default:
-      return rgbFromString(string);
-  }
-}
-
-const identity = (x: number) => x;
-
-const toSignedInt32 = (x: number) => x | 0x0;
-
-// 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 in that way.
-export const integerColor =
-  Platform.OS === 'android' ? toSignedInt32 : identity;
-
-// Returns 0xaarrggbb or null
-export default function extractColor(color: Color | void) {
-  if (typeof color === 'number') {
-    if (color >>> 0 === color && color >= 0 && color <= 0xffffffff) {
-      return integerColor(color);
-    }
-    return null;
-  }
-
-  const parsedColor =
-    typeof color === 'string' ? colorFromString(color) : color;
-  if (!Array.isArray(parsedColor)) {
-    return parsedColor;
-  }
-
-  const r = parsedColor[0];
-  const g = parsedColor[1];
-  const b = parsedColor[2];
-  const a = parsedColor[3];
-
-  const int32Color =
-    ((a === undefined ? 0xff000000 : Math.round(a * 255) << 24) |
-      (Math.round(r * 255) << 16) |
-      (Math.round(g * 255) << 8) |
-      Math.round(b * 255)) >>>
-    0;
-
-  return integerColor(int32Color);
-}
diff --git a/src/lib/extract/extractFill.ts b/src/lib/extract/extractFill.ts
index b23122b5..78842ee8 100644
--- a/src/lib/extract/extractFill.ts
+++ b/src/lib/extract/extractFill.ts
@@ -1,14 +1,14 @@
 import extractBrush from './extractBrush';
 import extractOpacity from './extractOpacity';
-import { colorNames } from './extractColor';
 import { extractedProps, FillProps } from './types';
+import { processColor } from 'react-native';
 
 const fillRules: { evenodd: number; nonzero: number } = {
   evenodd: 0,
   nonzero: 1,
 };
 
-const defaultFill = colorNames.black;
+const defaultFill = processColor('black');
 
 export default function extractFill(
   o: extractedProps,
diff --git a/src/lib/extract/extractGradient.ts b/src/lib/extract/extractGradient.ts
index c57d346d..301394ab 100644
--- a/src/lib/extract/extractGradient.ts
+++ b/src/lib/extract/extractGradient.ts
@@ -1,6 +1,6 @@
 import React, { Children, ReactElement } from 'react';
+import { processColor } from 'react-native';
 
-import extractColor from './extractColor';
 import extractOpacity from './extractOpacity';
 import extractTransform from './extractTransform';
 import { TransformProps } from './types';
@@ -71,7 +71,7 @@ export default function extractGradient(
       },
     } = childArray[i];
     const offsetNumber = percentToFloat(offset || 0);
-    const color = stopColor && extractColor(stopColor);
+    const color = stopColor && processColor(stopColor);
     if (typeof color !== 'number' || isNaN(offsetNumber)) {
       console.warn(
         `"${stopColor}" is not a valid color or "${offset}" is not a valid offset`,
diff --git a/src/lib/extract/types.ts b/src/lib/extract/types.ts
index eaa05454..0cb48274 100644
--- a/src/lib/extract/types.ts
+++ b/src/lib/extract/types.ts
@@ -1,15 +1,9 @@
 import { Component } from 'react';
-import { GestureResponderEvent } from 'react-native';
+import { ColorValue, GestureResponderEvent } from 'react-native';
 
 export type NumberProp = string | number;
 export type NumberArray = NumberProp[] | NumberProp;
 
-// rgbaArray = [r, g, b, a]
-export type rgbaArray = number[];
-// int32ARGBColor = 0xaarrggbb
-export type Int32ARGBColor = number;
-export type Color = Int32ARGBColor | rgbaArray | string;
-
 export type Linecap = 'butt' | 'square' | 'round';
 export type Linejoin = 'miter' | 'bevel' | 'round';
 export type VectorEffect =
@@ -75,12 +69,12 @@ export type ResponderInstanceProps = {
   ) => boolean;
 };
 export type FillProps = {
-  fill?: Color;
+  fill?: ColorValue;
   fillRule?: 'evenodd' | 'nonzero';
   fillOpacity?: NumberProp;
 };
 export type StrokeProps = {
-  stroke?: Color;
+  stroke?: ColorValue;
   strokeWidth?: NumberProp;
   strokeOpacity?: NumberProp;
   strokeDasharray?: NumberArray;