diff --git a/Example/ios/Podfile.lock b/Example/ios/Podfile.lock
index 7454e7092..f18bf7b84 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 c04945c08..a9b77ac2f 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 4f282bdf3..94cc3bac2 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 95db448cb..d28792a0f 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 000000000..c7d44e16a
--- /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 5a718b124..15286d072 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 f58b6eefc..2488ff31b 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 ed8ad2c42..91068ab3f 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 b6c29eb76..3b592a273 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 96261f3ef..000000000
--- 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 b23122b5d..78842ee89 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 c57d346dc..301394ab2 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 eaa054548..0cb482749 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;