From 9d9958264bfd8fcfc125b2739788208777617225 Mon Sep 17 00:00:00 2001 From: Jakub Grzywacz Date: Mon, 30 Sep 2024 15:50:37 +0200 Subject: [PATCH] feat: properly implement `currentColor` (#2466) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Summary Motivated by issue #2455, I decided to implement the `currentColor` property in line with the specs (https://www.w3.org/TR/SVG11/color.html#ColorProperty). This involves adding the `color` property to all renderable nodes. ## Test Plan Example app -> `Test2455` image ```svg ``` ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | MacOS | ✅ | | Android | ✅ | --- .../java/com/horcrux/svg/SvgViewManager.java | 8 +------ .../java/com/horcrux/svg/SvgViewManager.java | 8 +------ .../java/com/horcrux/svg/RenderableView.java | 23 ++++++++++++++++++- .../horcrux/svg/RenderableViewManager.java | 5 ++++ .../main/java/com/horcrux/svg/SvgView.java | 6 ++--- .../RNSVGCircleManagerDelegate.java | 4 ++++ .../RNSVGCircleManagerInterface.java | 1 + .../RNSVGClipPathManagerDelegate.java | 4 ++++ .../RNSVGClipPathManagerInterface.java | 1 + .../RNSVGEllipseManagerDelegate.java | 4 ++++ .../RNSVGEllipseManagerInterface.java | 1 + .../RNSVGForeignObjectManagerDelegate.java | 4 ++++ .../RNSVGForeignObjectManagerInterface.java | 1 + .../RNSVGGroupManagerDelegate.java | 4 ++++ .../RNSVGGroupManagerInterface.java | 1 + .../RNSVGImageManagerDelegate.java | 4 ++++ .../RNSVGImageManagerInterface.java | 1 + .../RNSVGLineManagerDelegate.java | 4 ++++ .../RNSVGLineManagerInterface.java | 1 + .../RNSVGMarkerManagerDelegate.java | 4 ++++ .../RNSVGMarkerManagerInterface.java | 1 + .../RNSVGMaskManagerDelegate.java | 4 ++++ .../RNSVGMaskManagerInterface.java | 1 + .../RNSVGPathManagerDelegate.java | 4 ++++ .../RNSVGPathManagerInterface.java | 1 + .../RNSVGPatternManagerDelegate.java | 4 ++++ .../RNSVGPatternManagerInterface.java | 1 + .../RNSVGRectManagerDelegate.java | 4 ++++ .../RNSVGRectManagerInterface.java | 1 + .../RNSVGSvgViewAndroidManagerDelegate.java | 3 --- .../RNSVGSvgViewAndroidManagerInterface.java | 1 - .../RNSVGSymbolManagerDelegate.java | 4 ++++ .../RNSVGSymbolManagerInterface.java | 1 + .../RNSVGTSpanManagerDelegate.java | 4 ++++ .../RNSVGTSpanManagerInterface.java | 1 + .../RNSVGTextManagerDelegate.java | 4 ++++ .../RNSVGTextManagerInterface.java | 1 + .../RNSVGTextPathManagerDelegate.java | 4 ++++ .../RNSVGTextPathManagerInterface.java | 1 + .../viewmanagers/RNSVGUseManagerDelegate.java | 4 ++++ .../RNSVGUseManagerInterface.java | 1 + .../java/com/horcrux/svg/SvgViewManager.java | 8 +------ apple/Elements/RNSVGSvgView.mm | 3 --- apple/Utils/RNSVGFabricConversions.h | 3 +++ apple/ViewManagers/RNSVGRenderableManager.mm | 1 + apple/ViewManagers/RNSVGSvgViewManager.mm | 1 - apps/test-examples/src/Test2455.tsx | 20 ++++++++++++---- src/fabric/AndroidSvgViewNativeComponent.ts | 1 - src/fabric/CircleNativeComponent.ts | 1 + src/fabric/ClipPathNativeComponent.ts | 1 + src/fabric/EllipseNativeComponent.ts | 1 + src/fabric/ForeignObjectNativeComponent.ts | 1 + src/fabric/GroupNativeComponent.ts | 1 + src/fabric/IOSSvgViewNativeComponent.ts | 1 - src/fabric/ImageNativeComponent.ts | 1 + src/fabric/LineNativeComponent.ts | 1 + src/fabric/MarkerNativeComponent.ts | 1 + src/fabric/MaskNativeComponent.ts | 1 + src/fabric/PathNativeComponent.ts | 1 + src/fabric/PatternNativeComponent.ts | 1 + src/fabric/RectNativeComponent.ts | 1 + src/fabric/SymbolNativeComponent.ts | 1 + src/fabric/TSpanNativeComponent.ts | 1 + src/fabric/TextNativeComponent.ts | 1 + src/fabric/TextPathNativeComponent.ts | 1 + src/fabric/UseNativeComponent.ts | 1 + src/lib/extract/extractProps.ts | 6 +++++ src/lib/extract/types.ts | 7 +++++- 68 files changed, 166 insertions(+), 41 deletions(-) diff --git a/android/src/borderRadiusRn75/java/com/horcrux/svg/SvgViewManager.java b/android/src/borderRadiusRn75/java/com/horcrux/svg/SvgViewManager.java index f7108c02..1ee4622a 100644 --- a/android/src/borderRadiusRn75/java/com/horcrux/svg/SvgViewManager.java +++ b/android/src/borderRadiusRn75/java/com/horcrux/svg/SvgViewManager.java @@ -99,16 +99,10 @@ class SvgViewManager extends ReactViewManager return true; } - @ReactProp(name = "tintColor", customType = "Color") - @Override - public void setTintColor(SvgView node, Integer tintColor) { - node.setTintColor(tintColor); - } - @ReactProp(name = "color", customType = "Color") @Override public void setColor(SvgView node, Integer color) { - node.setTintColor(color); + node.setCurrentColor(color); } @ReactProp(name = "minX") diff --git a/android/src/deprecated/java/com/horcrux/svg/SvgViewManager.java b/android/src/deprecated/java/com/horcrux/svg/SvgViewManager.java index e91033f3..39d0af5a 100644 --- a/android/src/deprecated/java/com/horcrux/svg/SvgViewManager.java +++ b/android/src/deprecated/java/com/horcrux/svg/SvgViewManager.java @@ -103,16 +103,10 @@ class SvgViewManager extends ReactViewManager return true; } - @ReactProp(name = "tintColor", customType = "Color") - @Override - public void setTintColor(SvgView node, Integer tintColor) { - node.setTintColor(tintColor); - } - @ReactProp(name = "color", customType = "Color") @Override public void setColor(SvgView node, Integer color) { - node.setTintColor(color); + node.setCurrentColor(color); } @ReactProp(name = "minX") diff --git a/android/src/main/java/com/horcrux/svg/RenderableView.java b/android/src/main/java/com/horcrux/svg/RenderableView.java index 60a0e9f1..cb5750e7 100644 --- a/android/src/main/java/com/horcrux/svg/RenderableView.java +++ b/android/src/main/java/com/horcrux/svg/RenderableView.java @@ -21,6 +21,7 @@ import android.graphics.PorterDuffXfermode; import android.graphics.Rect; import android.graphics.RectF; import android.graphics.Region; +import android.view.ViewParent; import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.Dynamic; import com.facebook.react.bridge.JSApplicationIllegalArgumentException; @@ -83,6 +84,7 @@ public abstract class RenderableView extends VirtualView implements ReactHitSlop public Paint.Cap strokeLinecap = Paint.Cap.BUTT; public Paint.Join strokeLinejoin = Paint.Join.MITER; + private int mCurrentColor = 0; public @Nullable ReadableArray fill; public float fillOpacity = 1; public Path.FillType fillRule = Path.FillType.WINDING; @@ -122,6 +124,25 @@ public abstract class RenderableView extends VirtualView implements ReactHitSlop invalidate(); } + public void setCurrentColor(Integer color) { + mCurrentColor = color != null ? color : 0; + invalidate(); + clearChildCache(); + } + + int getCurrentColor() { + if (this.mCurrentColor != 0) { + return this.mCurrentColor; + } + ViewParent parent = this.getParent(); + if (parent instanceof VirtualView) { + return ((RenderableView) parent).getCurrentColor(); + } else if (parent instanceof SvgView) { + return ((SvgView) parent).mCurrentColor; + } + return 0; + } + public void setFill(@Nullable Dynamic fill) { if (fill == null || fill.isNull()) { this.fill = null; @@ -625,7 +646,7 @@ public abstract class RenderableView extends VirtualView implements ReactHitSlop } case 2: { - int color = getSvgView().mTintColor; + int color = this.getCurrentColor(); int alpha = color >>> 24; alpha = Math.round((float) alpha * opacity); paint.setColor(alpha << 24 | (color & 0x00ffffff)); diff --git a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java index 29600925..75e95b43 100644 --- a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java +++ b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java @@ -1680,6 +1680,11 @@ class RenderableViewManager extends VirtualViewManager node.setFilter(filter); } + @ReactProp(name = "color", customType = "Color") + public void setColor(T node, Integer color) { + node.setCurrentColor(color); + } + @ReactProp(name = "fill") public void setFill(T node, @Nullable Dynamic fill) { node.setFill(fill); diff --git a/android/src/main/java/com/horcrux/svg/SvgView.java b/android/src/main/java/com/horcrux/svg/SvgView.java index 85dadf34..346873cc 100644 --- a/android/src/main/java/com/horcrux/svg/SvgView.java +++ b/android/src/main/java/com/horcrux/svg/SvgView.java @@ -189,7 +189,7 @@ public class SvgView extends ReactViewGroup implements ReactCompoundView, ReactC final Matrix mInvViewBoxMatrix = new Matrix(); private boolean mInvertible = true; private boolean mRendered = false; - int mTintColor = 0; + int mCurrentColor = 0; boolean notRendered() { return !mRendered; @@ -209,8 +209,8 @@ public class SvgView extends ReactViewGroup implements ReactCompoundView, ReactC } } - public void setTintColor(Integer tintColor) { - mTintColor = tintColor != null ? tintColor : 0; + public void setCurrentColor(Integer color) { + mCurrentColor = color != null ? color : 0; invalidate(); clearChildCache(); } diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerDelegate.java index da553fe5..40cb5112 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGCircleManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerDelegate.java index 4fa1fffd..37a9e95e 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGClipPathManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerDelegate.java index dce4c824..bfa049a7 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGEllipseManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerDelegate.java index 14dda573..6cc78571 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGForeignObjectManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerDelegate.java index 95516fa9..4738993d 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGGroupManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerDelegate.java index 27f537c3..884cc732 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGImageManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerDelegate.java index 4455723d..c84c1749 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGLineManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerDelegate.java index 4f8bb575..d0ee45ab 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGMarkerManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerDelegate.java index 42512da2..47623e4e 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGMaskManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerDelegate.java index b363e948..dd3c66d5 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGPathManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerDelegate.java index 64a10d7b..0fee1856 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGPatternManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerDelegate.java index 95e57def..782a4a39 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGRectManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSvgViewAndroidManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSvgViewAndroidManagerDelegate.java index b9c436d6..f074492e 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSvgViewAndroidManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSvgViewAndroidManagerDelegate.java @@ -48,9 +48,6 @@ public class RNSVGSvgViewAndroidManagerDelegate { void setVbHeight(T view, float value); void setAlign(T view, @Nullable String value); void setMeetOrSlice(T view, int value); - void setTintColor(T view, @Nullable Integer value); void setColor(T view, @Nullable Integer value); void setPointerEvents(T view, @Nullable String value); void setHasTVPreferredFocus(T view, boolean value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSymbolManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSymbolManagerDelegate.java index 065f1ee3..25f764b7 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSymbolManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSymbolManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGSymbolManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerDelegate.java index d5b854e4..46c7a23f 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGTSpanManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerDelegate.java index b57cf8ff..87d7c0a0 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGTextManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerDelegate.java index eec9f0ac..517bb08c 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGTextPathManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGUseManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGUseManagerDelegate.java index 0f93e593..4bbbae0f 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGUseManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGUseManagerDelegate.java @@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers; import android.view.View; import androidx.annotation.Nullable; +import com.facebook.react.bridge.ColorPropConverter; import com.facebook.react.bridge.DynamicFromObject; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; @@ -60,6 +61,9 @@ public class RNSVGUseManagerDelegate { void setResponsible(T view, boolean value); void setDisplay(T view, @Nullable String value); void setPointerEvents(T view, @Nullable String value); + void setColor(T view, @Nullable Integer value); void setFill(T view, @Nullable ReadableMap value); void setFillOpacity(T view, float value); void setFillRule(T view, int value); diff --git a/android/src/transformRn73/java/com/horcrux/svg/SvgViewManager.java b/android/src/transformRn73/java/com/horcrux/svg/SvgViewManager.java index 113d0a01..eb3b9480 100644 --- a/android/src/transformRn73/java/com/horcrux/svg/SvgViewManager.java +++ b/android/src/transformRn73/java/com/horcrux/svg/SvgViewManager.java @@ -99,16 +99,10 @@ class SvgViewManager extends ReactViewManager return true; } - @ReactProp(name = "tintColor", customType = "Color") - @Override - public void setTintColor(SvgView node, Integer tintColor) { - node.setTintColor(tintColor); - } - @ReactProp(name = "color", customType = "Color") @Override public void setColor(SvgView node, Integer color) { - node.setTintColor(color); + node.setCurrentColor(color); } @ReactProp(name = "minX") diff --git a/apple/Elements/RNSVGSvgView.mm b/apple/Elements/RNSVGSvgView.mm index bbe74e74..f5da0cf5 100644 --- a/apple/Elements/RNSVGSvgView.mm +++ b/apple/Elements/RNSVGSvgView.mm @@ -89,9 +89,6 @@ using namespace facebook::react; } self.align = RCTNSStringFromStringNilIfEmpty(newProps.align); self.meetOrSlice = intToRNSVGVBMOS(newProps.meetOrSlice); - if (RCTUIColorFromSharedColor(newProps.tintColor)) { - self.tintColor = RCTUIColorFromSharedColor(newProps.tintColor); - } if (RCTUIColorFromSharedColor(newProps.color)) { self.tintColor = RCTUIColorFromSharedColor(newProps.color); } diff --git a/apple/Utils/RNSVGFabricConversions.h b/apple/Utils/RNSVGFabricConversions.h index 8c5bd0ae..e730b15f 100644 --- a/apple/Utils/RNSVGFabricConversions.h +++ b/apple/Utils/RNSVGFabricConversions.h @@ -140,6 +140,9 @@ template void setCommonRenderableProps(const T &renderableProps, RNSVGRenderable *renderableNode) { setCommonNodeProps(renderableProps, renderableNode); + if (RCTUIColorFromSharedColor(renderableProps.color)) { + renderableNode.tintColor = RCTUIColorFromSharedColor(renderableProps.color); + } renderableNode.fill = brushFromColorStruct(renderableProps.fill); renderableNode.fillOpacity = renderableProps.fillOpacity; renderableNode.fillRule = renderableProps.fillRule == 0 ? kRNSVGCGFCRuleEvenodd : kRNSVGCGFCRuleNonzero; diff --git a/apple/ViewManagers/RNSVGRenderableManager.mm b/apple/ViewManagers/RNSVGRenderableManager.mm index 8d9253bc..612de16e 100644 --- a/apple/ViewManagers/RNSVGRenderableManager.mm +++ b/apple/ViewManagers/RNSVGRenderableManager.mm @@ -24,6 +24,7 @@ RCT_EXPORT_MODULE() return [RNSVGRenderable new]; } +RCT_REMAP_VIEW_PROPERTY(color, tintColor, UIColor) RCT_EXPORT_VIEW_PROPERTY(fill, RNSVGBrush) RCT_EXPORT_VIEW_PROPERTY(fillOpacity, CGFloat) RCT_EXPORT_VIEW_PROPERTY(fillRule, RNSVGCGFCRule) diff --git a/apple/ViewManagers/RNSVGSvgViewManager.mm b/apple/ViewManagers/RNSVGSvgViewManager.mm index 6d324397..a9e5bee5 100644 --- a/apple/ViewManagers/RNSVGSvgViewManager.mm +++ b/apple/ViewManagers/RNSVGSvgViewManager.mm @@ -26,7 +26,6 @@ RCT_EXPORT_VIEW_PROPERTY(vbWidth, CGFloat) RCT_EXPORT_VIEW_PROPERTY(vbHeight, CGFloat) RCT_EXPORT_VIEW_PROPERTY(align, NSString) RCT_EXPORT_VIEW_PROPERTY(meetOrSlice, RNSVGVBMOS) -RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor) RCT_REMAP_VIEW_PROPERTY(color, tintColor, UIColor) RCT_CUSTOM_VIEW_PROPERTY(hitSlop, UIEdgeInsets, RNSVGSvgView) { diff --git a/apps/test-examples/src/Test2455.tsx b/apps/test-examples/src/Test2455.tsx index 20cc06cc..0409f11a 100644 --- a/apps/test-examples/src/Test2455.tsx +++ b/apps/test-examples/src/Test2455.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {Button, Share, Text, TouchableOpacity, View} from 'react-native'; -import {G, Path, Rect, Svg} from 'react-native-svg'; +import {Circle, G, Path, Rect, Svg} from 'react-native-svg'; const Favorite = ({color}: {color: string}): JSX.Element => { return ( @@ -9,10 +9,20 @@ const Favorite = ({color}: {color: string}): JSX.Element => { d="M22.7927 11.1242C21.359 18.5187 12.0003 22.7782 12.0003 22.7782C12.0003 22.7782 2.64153 18.5187 1.20661 11.1242C0.326598 6.58719 2.24925 2.02329 7.13701 2.00007C10.7781 1.98296 12.0003 5.65211 12.0003 5.65211C12.0003 5.65211 13.2226 1.98173 16.8624 2.00007C21.7612 2.02329 23.6727 6.58841 22.7927 11.1242Z" fill="currentColor" /> - - - - + + + + + + + diff --git a/src/fabric/AndroidSvgViewNativeComponent.ts b/src/fabric/AndroidSvgViewNativeComponent.ts index 252b2276..66414e10 100644 --- a/src/fabric/AndroidSvgViewNativeComponent.ts +++ b/src/fabric/AndroidSvgViewNativeComponent.ts @@ -33,7 +33,6 @@ interface NativeProps extends ViewProps { vbHeight?: Float; align?: string; meetOrSlice?: Int32; - tintColor?: ColorValue; color?: ColorValue; pointerEvents?: string; diff --git a/src/fabric/CircleNativeComponent.ts b/src/fabric/CircleNativeComponent.ts index 260ea3aa..c4cc5eaf 100644 --- a/src/fabric/CircleNativeComponent.ts +++ b/src/fabric/CircleNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/ClipPathNativeComponent.ts b/src/fabric/ClipPathNativeComponent.ts index 8f2cd675..69daeef1 100644 --- a/src/fabric/ClipPathNativeComponent.ts +++ b/src/fabric/ClipPathNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/EllipseNativeComponent.ts b/src/fabric/EllipseNativeComponent.ts index 1a95c1c7..e5c1a3f4 100644 --- a/src/fabric/EllipseNativeComponent.ts +++ b/src/fabric/EllipseNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/ForeignObjectNativeComponent.ts b/src/fabric/ForeignObjectNativeComponent.ts index b2b1622d..4ed5c8e7 100644 --- a/src/fabric/ForeignObjectNativeComponent.ts +++ b/src/fabric/ForeignObjectNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/GroupNativeComponent.ts b/src/fabric/GroupNativeComponent.ts index 90798454..71cabd32 100644 --- a/src/fabric/GroupNativeComponent.ts +++ b/src/fabric/GroupNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/IOSSvgViewNativeComponent.ts b/src/fabric/IOSSvgViewNativeComponent.ts index 2e72d5ca..1b5780b1 100644 --- a/src/fabric/IOSSvgViewNativeComponent.ts +++ b/src/fabric/IOSSvgViewNativeComponent.ts @@ -22,7 +22,6 @@ interface NativeProps extends ViewProps { vbHeight?: Float; align?: string; meetOrSlice?: Int32; - tintColor?: ColorValue; color?: ColorValue; pointerEvents?: string; hitSlop?: UnsafeMixed; diff --git a/src/fabric/ImageNativeComponent.ts b/src/fabric/ImageNativeComponent.ts index 027af78e..acb25077 100644 --- a/src/fabric/ImageNativeComponent.ts +++ b/src/fabric/ImageNativeComponent.ts @@ -45,6 +45,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/LineNativeComponent.ts b/src/fabric/LineNativeComponent.ts index 3e02a81d..bf8e828d 100644 --- a/src/fabric/LineNativeComponent.ts +++ b/src/fabric/LineNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/MarkerNativeComponent.ts b/src/fabric/MarkerNativeComponent.ts index c3441601..d701491f 100644 --- a/src/fabric/MarkerNativeComponent.ts +++ b/src/fabric/MarkerNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/MaskNativeComponent.ts b/src/fabric/MaskNativeComponent.ts index 65b547e2..cbeabeff 100644 --- a/src/fabric/MaskNativeComponent.ts +++ b/src/fabric/MaskNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/PathNativeComponent.ts b/src/fabric/PathNativeComponent.ts index 866fd562..acb3e5c8 100644 --- a/src/fabric/PathNativeComponent.ts +++ b/src/fabric/PathNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/PatternNativeComponent.ts b/src/fabric/PatternNativeComponent.ts index 4bd2afe0..037b6759 100644 --- a/src/fabric/PatternNativeComponent.ts +++ b/src/fabric/PatternNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/RectNativeComponent.ts b/src/fabric/RectNativeComponent.ts index 80e115b1..bfedcb78 100644 --- a/src/fabric/RectNativeComponent.ts +++ b/src/fabric/RectNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/SymbolNativeComponent.ts b/src/fabric/SymbolNativeComponent.ts index 2d537105..b7918e13 100644 --- a/src/fabric/SymbolNativeComponent.ts +++ b/src/fabric/SymbolNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/TSpanNativeComponent.ts b/src/fabric/TSpanNativeComponent.ts index 60e67a56..c4ff0bff 100644 --- a/src/fabric/TSpanNativeComponent.ts +++ b/src/fabric/TSpanNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/TextNativeComponent.ts b/src/fabric/TextNativeComponent.ts index de3d109a..58bca782 100644 --- a/src/fabric/TextNativeComponent.ts +++ b/src/fabric/TextNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/TextPathNativeComponent.ts b/src/fabric/TextPathNativeComponent.ts index 73c292e4..b1e8108e 100644 --- a/src/fabric/TextPathNativeComponent.ts +++ b/src/fabric/TextPathNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/fabric/UseNativeComponent.ts b/src/fabric/UseNativeComponent.ts index 4fd51ab3..0c1b5d9f 100644 --- a/src/fabric/UseNativeComponent.ts +++ b/src/fabric/UseNativeComponent.ts @@ -32,6 +32,7 @@ type ColorStruct = Readonly<{ }>; interface SvgRenderableCommonProps { + color?: ColorValue; fill?: ColorStruct; fillOpacity?: WithDefault; fillRule?: WithDefault; diff --git a/src/lib/extract/extractProps.ts b/src/lib/extract/extractProps.ts index 090041e4..df192fa4 100644 --- a/src/lib/extract/extractProps.ts +++ b/src/lib/extract/extractProps.ts @@ -6,6 +6,7 @@ import extractOpacity from './extractOpacity'; import { idPattern } from '../util'; import type { ClipProps, + ColorProps, extractedProps, FillProps, NumberProp, @@ -57,6 +58,7 @@ export default function extractProps( ResponderProps & StrokeProps & FillProps & + ColorProps & ClipProps, ref: object ) { @@ -84,6 +86,10 @@ export default function extractProps( extractFill(extracted, props, inherited); extractStroke(extracted, props, inherited); + if (props.color) { + extracted.color = props.color; + } + if (inherited.length) { extracted.propList = inherited; } diff --git a/src/lib/extract/types.ts b/src/lib/extract/types.ts index 13544962..bb8a9e06 100644 --- a/src/lib/extract/types.ts +++ b/src/lib/extract/types.ts @@ -112,6 +112,10 @@ export interface FillProps { fillRule?: FillRule; } +export interface ColorProps { + color?: ColorValue; +} + export interface ClipProps { clipRule?: FillRule; clipPath?: string; @@ -259,7 +263,8 @@ export interface AccessibilityProps { // FIXME: This interface should probably be named CommonRenderableProps export interface CommonPathProps - extends FillProps, + extends ColorProps, + FillProps, StrokeProps, ClipProps, TransformProps,