diff --git a/android/src/main/java/com/horcrux/svg/RenderableShadowNode.java b/android/src/main/java/com/horcrux/svg/RenderableShadowNode.java index 2a1c1748..2efdb2d3 100644 --- a/android/src/main/java/com/horcrux/svg/RenderableShadowNode.java +++ b/android/src/main/java/com/horcrux/svg/RenderableShadowNode.java @@ -394,6 +394,9 @@ abstract public class RenderableShadowNode extends VirtualNode { } brush.setupPaint(paint, mBox, mScale, opacity); } + } else if (colorType == 2) { + int brush = getSvgShadowNode().mTintColor; + paint.setColor(brush); } } diff --git a/android/src/main/java/com/horcrux/svg/SvgViewShadowNode.java b/android/src/main/java/com/horcrux/svg/SvgViewShadowNode.java index 502099e3..ee645951 100644 --- a/android/src/main/java/com/horcrux/svg/SvgViewShadowNode.java +++ b/android/src/main/java/com/horcrux/svg/SvgViewShadowNode.java @@ -30,6 +30,8 @@ import java.io.ByteArrayOutputStream; import java.util.HashMap; import java.util.Map; +import javax.annotation.Nullable; + /** * Shadow node for RNSVG virtual tree root - RNSVGSvgView */ @@ -54,6 +56,7 @@ public class SvgViewShadowNode extends LayoutShadowNode { private Matrix mInvViewBoxMatrix = new Matrix(); private boolean mInvertible = true; private boolean mRendered = false; + int mTintColor = 0; public SvgViewShadowNode() { mScale = DisplayMetricsHolder.getScreenDisplayMetrics().density; @@ -74,6 +77,15 @@ public class SvgViewShadowNode extends LayoutShadowNode { }); } + @ReactProp(name = "tintColor", customType = "Color") + public void setTintColor(@Nullable Integer tintColor) { + if (tintColor == null) { + mTintColor = 0; + } else { + mTintColor = tintColor; + } + } + @ReactProp(name = "minX") public void setMinX(float minX) { mMinX = minX; diff --git a/elements/Svg.js b/elements/Svg.js index df612362..7a63a937 100644 --- a/elements/Svg.js +++ b/elements/Svg.js @@ -75,6 +75,7 @@ class Svg extends Shape { viewBox, preserveAspectRatio, style, + color, ...props } = this.props; let dimensions; @@ -95,6 +96,7 @@ class Svg extends Shape { {...props} bbWidth={w} bbHeight={h} + tintColor={color} {...extractResponder(props, this)} {...extractViewBox({ viewBox, preserveAspectRatio })} ref={ele => { @@ -117,7 +119,8 @@ const NativeSvgView = requireNativeComponent("RNSVGSvgView", null, { nativeOnly: { ...ViewBoxAttributes, width: true, - height: true + height: true, + tintColor: true } }); diff --git a/ios/RNSVGRenderable.m b/ios/RNSVGRenderable.m index f60a67ed..74161f5e 100644 --- a/ios/RNSVGRenderable.m +++ b/ios/RNSVGRenderable.m @@ -298,7 +298,12 @@ UInt32 saturate(double value) { BOOL evenodd = self.fillRule == kRNSVGCGFCRuleEvenodd; if (self.fill) { - fillColor = [self.fill applyFillColor:context opacity:self.fillOpacity]; + if (self.fill.class == RNSVGBrush.class) { + CGContextSetFillColorWithColor(context, [self.tintColor CGColor]); + fillColor = YES; + } else { + fillColor = [self.fill applyFillColor:context opacity:self.fillOpacity]; + } if (fillColor) { mode = evenodd ? kCGPathEOFill : kCGPathFill; @@ -336,7 +341,14 @@ UInt32 saturate(double value) { CGContextClip(context); } - BOOL strokeColor = [self.stroke applyStrokeColor:context opacity:self.strokeOpacity]; + BOOL strokeColor; + + if (self.stroke.class == RNSVGBrush.class) { + CGContextSetStrokeColorWithColor(context,[self.tintColor CGColor]); + strokeColor = YES; + } else { + strokeColor = [self.stroke applyStrokeColor:context opacity:self.strokeOpacity]; + } if (strokeColor && fillColor) { mode = evenodd ? kCGPathEOFillStroke : kCGPathFillStroke; diff --git a/ios/Utils/RCTConvert+RNSVG.m b/ios/Utils/RCTConvert+RNSVG.m index f4e059b8..0b45e7a5 100644 --- a/ios/Utils/RCTConvert+RNSVG.m +++ b/ios/Utils/RCTConvert+RNSVG.m @@ -84,6 +84,8 @@ RCT_ENUM_CONVERTER(RNSVGUnits, (@{ return [[RNSVGSolidColorBrush alloc] initWithArray:arr]; case 1: // brush return [[RNSVGPainterBrush alloc] initWithArray:arr]; + case 2: // currentColor + return [[RNSVGBrush alloc] initWithArray:nil]; default: RCTLogError(@"Unknown brush type: %zd", type); return nil; diff --git a/ios/ViewManagers/RNSVGSvgViewManager.m b/ios/ViewManagers/RNSVGSvgViewManager.m index 84438cf7..a8302ae0 100644 --- a/ios/ViewManagers/RNSVGSvgViewManager.m +++ b/ios/ViewManagers/RNSVGSvgViewManager.m @@ -28,6 +28,7 @@ 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_EXPORT_METHOD(toDataURL:(nonnull NSNumber *)reactTag callback:(RCTResponseSenderBlock)callback) { diff --git a/lib/extract/extractBrush.js b/lib/extract/extractBrush.js index b06d3b11..bdf23a57 100644 --- a/lib/extract/extractBrush.js +++ b/lib/extract/extractBrush.js @@ -6,6 +6,9 @@ export default function(colorOrBrush) { return null; } + if (colorOrBrush === 'currentColor') { + return [2] + } try { let matched = colorOrBrush.match(patternReg); // brush