fix: handling of color/tintColor, fixes #1088 and #1115

software-mansion · Sep 25, 2019 · 1eaf3a6 · 1eaf3a6
1 parent d21213d
commit 1eaf3a6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/android/src/main/java/com/horcrux/svg/SvgView.java b/android/src/main/java/com/horcrux/svg/SvgView.java
@@ -169,7 +169,7 @@ private void clearChildCache() {
         }
     }
 
-    @ReactProp(name = "tintColor", customType = "Color")
+    @ReactProp(name = "tintColor")
     public void setTintColor(@Nullable Integer tintColor) {
         if (tintColor == null) {
             mTintColor = 0;

diff --git a/android/src/main/java/com/horcrux/svg/SvgViewManager.java b/android/src/main/java/com/horcrux/svg/SvgViewManager.java
@@ -77,12 +77,12 @@ public boolean needsCustomLayoutForChildren() {
         return true;
     }
 
-    @ReactProp(name = "tintColor", customType = "Color")
+    @ReactProp(name = "tintColor")
     public void setTintColor(SvgView node, @Nullable Integer tintColor) {
         node.setTintColor(tintColor);
     }
 
-    @ReactProp(name = "color", customType = "Color")
+    @ReactProp(name = "color")
     public void setColor(SvgView node, @Nullable Integer color) {
         node.setTintColor(color);
     }

diff --git a/src/elements/Svg.tsx b/src/elements/Svg.tsx
@@ -9,6 +9,7 @@ import {
   MeasureInWindowOnSuccessCallback,
 } from 'react-native';
 import {
+  Color,
   ClipProps,
   FillProps,
   NumberProp,
@@ -19,6 +20,7 @@ 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';
 
@@ -33,6 +35,7 @@ const styles = StyleSheet.create({
 
 export default class Svg extends Shape<
   {
+    color?: Color;
     style?: [] | {};
     viewBox?: string;
     opacity?: NumberProp;
@@ -148,12 +151,14 @@ export default class Svg extends Shape<
         }
       : null;
 
+    const tint = extractColor(color);
     return (
       <RNSVGSvg
         {...props}
         bbWidth={width}
         bbHeight={height}
-        tintColor={color}
+        color={tint}
+        tintColor={tint}
         onLayout={onLayout}
         ref={this.refMethod}
         style={[styles.svg, style, opacityStyle, dimensions]}