feat: remove extractColor in favor of RN impl

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

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 />;
 }

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

TestsExample/src/SampleTest.tsx → 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}
-      />
     </>
   );
 }

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}
+      />
+    </>
+  );
+}

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;

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;

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;

src/lib/extract/extractBrush.ts

@@ -1,18 +1,12 @@
-import extractColor, { integerColor } from './extractColor';
-import { Color } from './types';
+import { ColorValue, processColor } from 'react-native';
 
 const urlIdPattern = /^url\(#(.+)\)$/;
 
 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;
 }