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).

Author: WoLewicki

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.tsxTestsExample/src/SampleTest.tsx renamed to 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;
 }