add DynamicColorIOS support

android/src/main/java/com/horcrux/svg/SvgView.java

@@ -23,8 +23,10 @@
 
 import androidx.annotation.NonNull;
 
+import com.facebook.react.bridge.ColorPropConverter;
 import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.uimanager.DisplayMetricsHolder;
 import com.facebook.react.uimanager.ReactCompoundView;
 import com.facebook.react.uimanager.ReactCompoundViewGroup;
@@ -173,11 +175,17 @@ private void clearChildCache() {
     }
 
     @ReactProp(name = "tintColor")
-    public void setTintColor(@Nullable Integer tintColor) {
-        if (tintColor == null) {
-            mTintColor = 0;
-        } else {
-            mTintColor = tintColor;
+    public void setTintColor(@Nullable Dynamic tintColor) {
+        switch (tintColor.getType()) {
+            case Null:
+                mTintColor = 0;
+                break;
+            case Map:
+                mTintColor = ColorPropConverter.getColor(tintColor.asMap(), getContext());
+                break;
+            case Number:
+                mTintColor = tintColor.asInt();
+                break;
         }
         invalidate();
         clearChildCache();

android/src/main/java/com/horcrux/svg/SvgViewManager.java

@@ -78,12 +78,12 @@ public boolean needsCustomLayoutForChildren() {
     }
 
     @ReactProp(name = "tintColor")
-    public void setTintColor(SvgView node, @Nullable Integer tintColor) {
+    public void setTintColor(SvgView node, @Nullable Dynamic tintColor) {
         node.setTintColor(tintColor);
     }
 
     @ReactProp(name = "color")
-    public void setColor(SvgView node, @Nullable Integer color) {
+    public void setColor(SvgView node, @Nullable Dynamic color) {
         node.setTintColor(color);
     }
 

src/elements/Svg.tsx

@@ -18,6 +18,7 @@ import {
   ResponderProps,
   StrokeProps,
   TransformProps,
+  ProcessedDynamicColor,
 } from '../lib/extract/types';
 import extractResponder from '../lib/extract/extractResponder';
 import extractViewBox from '../lib/extract/extractViewBox';
@@ -183,7 +184,29 @@ export default class Svg extends Shape<
 
     extractResponder(props, props, this as ResponderInstanceProps);
 
-    const tint = extractColor(color);
+    let tint = extractColor(color);
+    if (typeof color === 'object' && color !== null) {
+      if ('dynamic' in color) {
+        let processedColor: ProcessedDynamicColor = {
+          dynamic: {
+            light: extractColor(color.dynamic.light) as number,
+            dark: extractColor(color.dynamic.dark) as number,
+          },
+        };
+        if (color.dynamic.highContrastLight) {
+          processedColor.dynamic.highContrastLight = extractColor(
+            color.dynamic.highContrastLight,
+          ) as number;
+        }
+        if (color.dynamic.highContrastDark) {
+          processedColor.dynamic.highContrastDark = extractColor(
+            color.dynamic.highContrastDark,
+          ) as number;
+        }
+        tint = processedColor;
+      }
+    }
+
     if (tint != null) {
       props.color = tint;
       props.tintColor = tint;

src/lib/extract/extractBrush.ts

@@ -1,5 +1,6 @@
+import { Platform } from 'react-native';
 import extractColor, { integerColor } from './extractColor';
-import { Color } from './types';
+import { Color, ProcessedDynamicColor } from './types';
 
 const urlIdPattern = /^url\(#(.+)\)$/;
 
@@ -39,15 +40,71 @@ export default function extractBrush(color?: Color) {
   if (typeof int32ARGBColor === 'number') {
     return int32ARGBColor;
   }
-
-  // iOS PlatformColor
-  if ('semantic' in color) {
-    return [0, color];
+  if (typeof color === 'string') {
+    if (color.indexOf('platform|') === 0) {
+      return [
+        0,
+        Platform.select({
+          ios: { semantic: color.split('|').slice(1) },
+          android: { resource_paths: color.split('|').slice(1) },
+        }),
+      ];
+    } else if (color.indexOf('semantic|') === 0) {
+      return [0, { semantic: color.split('|').slice(1) }];
+    } else if (color.indexOf('resource_paths|') === 0) {
+      return [0, { resource_paths: color.split('|').slice(1) }];
+    } else if (color.indexOf('dynamic|') === 0) {
+      let items = color.split('|');
+      let processedColor: ProcessedDynamicColor = {
+        dynamic: {
+          light: extractColor(items[1]) as number,
+          dark: extractColor(items[2]) as number,
+        },
+      };
+      if (items[3]) {
+        processedColor.dynamic.highContrastLight = extractColor(
+          items[3],
+        ) as number;
+      }
+      if (items[4]) {
+        processedColor.dynamic.highContrastDark = extractColor(
+          items[4],
+        ) as number;
+      }
+      return [0, processedColor];
+    }
   }
 
-  // Android PlatformColor
-  if ('resource_paths' in color) {
-    return [0, color];
+  if (typeof color === 'object' && color !== null) {
+    // iOS PlatformColor
+    if ('semantic' in color) {
+      return [0, color];
+    }
+
+    if ('dynamic' in color) {
+      let processedColor: ProcessedDynamicColor = {
+        dynamic: {
+          light: extractColor(color.dynamic.light) as number,
+          dark: extractColor(color.dynamic.dark) as number,
+        },
+      };
+      if (color.dynamic.highContrastLight) {
+        processedColor.dynamic.highContrastLight = extractColor(
+          color.dynamic.highContrastLight,
+        ) as number;
+      }
+      if (color.dynamic.highContrastDark) {
+        processedColor.dynamic.highContrastDark = extractColor(
+          color.dynamic.highContrastDark,
+        ) as number;
+      }
+      return [0, processedColor];
+    }
+
+    // Android PlatformColor
+    if ('resource_paths' in color) {
+      return [0, color];
+    }
   }
 
   console.warn(`"${color}" is not a valid color or brush`);

src/lib/extract/types.ts

@@ -8,7 +8,23 @@ export type NumberArray = NumberProp[] | NumberProp;
 export type rgbaArray = number[];
 // int32ARGBColor = 0xaarrggbb
 export type Int32ARGBColor = number;
-export type Color = Int32ARGBColor | rgbaArray | string;
+export type Color = Int32ARGBColor | rgbaArray | string | DynamicColor;
+export type DynamicColor = {
+  dynamic: {
+    light: Color;
+    dark: Color;
+    highContrastLight?: Color;
+    highContrastDark?: Color;
+  };
+};
+export type ProcessedDynamicColor = {
+  dynamic: {
+    light: Int32ARGBColor;
+    dark: Int32ARGBColor;
+    highContrastLight?: Int32ARGBColor;
+    highContrastDark?: Int32ARGBColor;
+  };
+};
 
 export type Linecap = 'butt' | 'square' | 'round';
 export type Linejoin = 'miter' | 'bevel' | 'round';