Remove string conversion of svg bounds, allow style arrays more widely

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

@@ -31,19 +31,19 @@ class CircleView extends RenderableView {
 
     @ReactProp(name = "cx")
     public void setCx(Dynamic cx) {
-        mCx = getLengthFromDynamic(cx);
+        mCx = SVGLength.from(cx);
         invalidate();
     }
 
     @ReactProp(name = "cy")
     public void setCy(Dynamic cy) {
-        mCy = getLengthFromDynamic(cy);
+        mCy = SVGLength.from(cy);
         invalidate();
     }
 
     @ReactProp(name = "r")
     public void setR(Dynamic r) {
-        mR = getLengthFromDynamic(r);
+        mR = SVGLength.from(r);
         invalidate();
     }
 

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

@@ -32,25 +32,25 @@ class EllipseView extends RenderableView {
 
     @ReactProp(name = "cx")
     public void setCx(Dynamic cx) {
-        mCx = getLengthFromDynamic(cx);
+        mCx = SVGLength.from(cx);
         invalidate();
     }
 
     @ReactProp(name = "cy")
     public void setCy(Dynamic cy) {
-        mCy = getLengthFromDynamic(cy);
+        mCy = SVGLength.from(cy);
         invalidate();
     }
 
     @ReactProp(name = "rx")
     public void setRx(Dynamic rx) {
-        mRx = getLengthFromDynamic(rx);
+        mRx = SVGLength.from(rx);
         invalidate();
     }
 
     @ReactProp(name = "ry")
     public void setRy(Dynamic ry) {
-        mRy = getLengthFromDynamic(ry);
+        mRy = SVGLength.from(ry);
         invalidate();
     }
 

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

@@ -16,7 +16,6 @@ import android.graphics.Matrix;
 import android.graphics.Paint;
 import android.graphics.Path;
 import android.graphics.RectF;
-import android.graphics.Region;
 import android.net.Uri;
 
 import com.facebook.common.executors.UiThreadImmediateExecutorService;
@@ -61,25 +60,25 @@ class ImageView extends RenderableView {
 
     @ReactProp(name = "x")
     public void setX(Dynamic x) {
-        mX = getLengthFromDynamic(x);
+        mX = SVGLength.from(x);
         invalidate();
     }
 
     @ReactProp(name = "y")
     public void setY(Dynamic y) {
-        mY = getLengthFromDynamic(y);
+        mY = SVGLength.from(y);
         invalidate();
     }
 
     @ReactProp(name = "width")
     public void setWidth(Dynamic width) {
-        mW = getLengthFromDynamic(width);
+        mW = SVGLength.from(width);
         invalidate();
     }
 
     @ReactProp(name = "height")
     public void setHeight(Dynamic height) {
-        mH = getLengthFromDynamic(height);
+        mH = SVGLength.from(height);
         invalidate();
     }
 

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

@@ -31,25 +31,25 @@ class LineView extends RenderableView {
 
     @ReactProp(name = "x1")
     public void setX1(Dynamic x1) {
-        mX1 = getLengthFromDynamic(x1);
+        mX1 = SVGLength.from(x1);
         invalidate();
     }
 
     @ReactProp(name = "y1")
     public void setY1(Dynamic y1) {
-        mY1 = getLengthFromDynamic(y1);
+        mY1 = SVGLength.from(y1);
         invalidate();
     }
 
     @ReactProp(name = "x2")
     public void setX2(Dynamic x2) {
-        mX2 = getLengthFromDynamic(x2);
+        mX2 = SVGLength.from(x2);
         invalidate();
     }
 
     @ReactProp(name = "y2")
     public void setY2(Dynamic y2) {
-        mY2 = getLengthFromDynamic(y2);
+        mY2 = SVGLength.from(y2);
         invalidate();
     }
 

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

@@ -44,25 +44,25 @@ class LinearGradientView extends DefinitionView {
 
     @ReactProp(name = "x1")
     public void setX1(Dynamic x1) {
-        mX1 = getLengthFromDynamic(x1);
+        mX1 = SVGLength.from(x1);
         invalidate();
     }
 
     @ReactProp(name = "y1")
     public void setY1(Dynamic y1) {
-        mY1 = getLengthFromDynamic(y1);
+        mY1 = SVGLength.from(y1);
         invalidate();
     }
 
     @ReactProp(name = "x2")
     public void setX2(Dynamic x2) {
-        mX2 = getLengthFromDynamic(x2);
+        mX2 = SVGLength.from(x2);
         invalidate();
     }
 
     @ReactProp(name = "y2")
     public void setY2(Dynamic y2) {
-        mY2 = getLengthFromDynamic(y2);
+        mY2 = SVGLength.from(y2);
         invalidate();
     }
 

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

@@ -48,25 +48,25 @@ class MaskView extends GroupView {
 
     @ReactProp(name = "x")
     public void setX(Dynamic x) {
-        mX = getLengthFromDynamic(x);
+        mX = SVGLength.from(x);
         invalidate();
     }
 
     @ReactProp(name = "y")
     public void setY(Dynamic y) {
-        mY = getLengthFromDynamic(y);
+        mY = SVGLength.from(y);
         invalidate();
     }
 
     @ReactProp(name = "width")
     public void setWidth(Dynamic width) {
-        mW = getLengthFromDynamic(width);
+        mW = SVGLength.from(width);
         invalidate();
     }
 
     @ReactProp(name = "height")
     public void setHeight(Dynamic height) {
-        mH = getLengthFromDynamic(height);
+        mH = SVGLength.from(height);
         invalidate();
     }
 

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

@@ -52,25 +52,25 @@ class PatternView extends GroupView {
 
     @ReactProp(name = "x")
     public void setX(Dynamic x) {
-        mX = getLengthFromDynamic(x);
+        mX = SVGLength.from(x);
         invalidate();
     }
 
     @ReactProp(name = "y")
     public void setY(Dynamic y) {
-        mY = getLengthFromDynamic(y);
+        mY = SVGLength.from(y);
         invalidate();
     }
 
     @ReactProp(name = "width")
     public void setWidth(Dynamic width) {
-        mW = getLengthFromDynamic(width);
+        mW = SVGLength.from(width);
         invalidate();
     }
 
     @ReactProp(name = "height")
     public void setHeight(Dynamic height) {
-        mH = getLengthFromDynamic(height);
+        mH = SVGLength.from(height);
         invalidate();
     }
 

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

@@ -45,37 +45,37 @@ class RadialGradientView extends DefinitionView {
 
     @ReactProp(name = "fx")
     public void setFx(Dynamic fx) {
-        mFx = getLengthFromDynamic(fx);
+        mFx = SVGLength.from(fx);
         invalidate();
     }
 
     @ReactProp(name = "fy")
     public void setFy(Dynamic fy) {
-        mFy = getLengthFromDynamic(fy);
+        mFy = SVGLength.from(fy);
         invalidate();
     }
 
     @ReactProp(name = "rx")
     public void setRx(Dynamic rx) {
-        mRx = getLengthFromDynamic(rx);
+        mRx = SVGLength.from(rx);
         invalidate();
     }
 
     @ReactProp(name = "ry")
     public void setRy(Dynamic ry) {
-        mRy = getLengthFromDynamic(ry);
+        mRy = SVGLength.from(ry);
         invalidate();
     }
 
     @ReactProp(name = "cx")
     public void setCx(Dynamic cx) {
-        mCx = getLengthFromDynamic(cx);
+        mCx = SVGLength.from(cx);
         invalidate();
     }
 
     @ReactProp(name = "cy")
     public void setCy(Dynamic cy) {
-        mCy = getLengthFromDynamic(cy);
+        mCy = SVGLength.from(cy);
         invalidate();
     }
 

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

@@ -34,37 +34,37 @@ class RectView extends RenderableView {
 
     @ReactProp(name = "x")
     public void setX(Dynamic x) {
-        mX = getLengthFromDynamic(x);
+        mX = SVGLength.from(x);
         invalidate();
     }
 
     @ReactProp(name = "y")
     public void setY(Dynamic y) {
-        mY = getLengthFromDynamic(y);
+        mY = SVGLength.from(y);
         invalidate();
     }
 
     @ReactProp(name = "width")
     public void setWidth(Dynamic width) {
-        mW = getLengthFromDynamic(width);
+        mW = SVGLength.from(width);
         invalidate();
     }
 
     @ReactProp(name = "height")
     public void setHeight(Dynamic height) {
-        mH = getLengthFromDynamic(height);
+        mH = SVGLength.from(height);
         invalidate();
     }
 
     @ReactProp(name = "rx")
     public void setRx(Dynamic rx) {
-        mRx = getLengthFromDynamic(rx);
+        mRx = SVGLength.from(rx);
         invalidate();
     }
 
     @ReactProp(name = "ry")
     public void setRy(Dynamic ry) {
-        mRy = getLengthFromDynamic(ry);
+        mRy = SVGLength.from(ry);
         invalidate();
     }
 

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

@@ -183,7 +183,7 @@ abstract public class RenderableView extends VirtualView {
 
     @ReactProp(name = "strokeWidth")
     public void setStrokeWidth(Dynamic strokeWidth) {
-        this.strokeWidth = getLengthFromDynamic(strokeWidth);
+        this.strokeWidth = SVGLength.from(strokeWidth);
         invalidate();
     }
 

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

@@ -1,5 +1,10 @@
 package com.horcrux.svg;
 
+import com.facebook.react.bridge.Dynamic;
+import com.facebook.react.bridge.ReadableArray;
+
+import java.util.ArrayList;
+
 // https://www.w3.org/TR/SVG/types.html#InterfaceSVGLength
 enum SVGLengthUnitType {
     SVG_LENGTHTYPE_UNKNOWN,
@@ -84,4 +89,53 @@ class SVGLength {
             }
         }
     }
+
+    static SVGLength from(Dynamic dynamic) {
+        switch (dynamic.getType()) {
+            case Number:
+                return new SVGLength(dynamic.asDouble());
+            case String:
+                return new SVGLength(dynamic.asString());
+            default:
+                return new SVGLength();
+        }
+    }
+
+    static String toString(Dynamic dynamic) {
+        switch (dynamic.getType()) {
+            case Number:
+                return String.valueOf(dynamic.asDouble());
+            case String:
+                return dynamic.asString();
+            default:
+                return null;
+        }
+    }
+
+    static ArrayList<SVGLength> arrayFrom(Dynamic dynamic) {
+        switch (dynamic.getType()) {
+            case Number: {
+                ArrayList<SVGLength> list = new ArrayList<>(1);
+                list.add(new SVGLength(dynamic.asDouble()));
+                return list;
+            }
+            case Array: {
+                ReadableArray arr = dynamic.asArray();
+                int size = arr.size();
+                ArrayList<SVGLength> list = new ArrayList<>(size);
+                for (int i = 0; i < size; i++) {
+                    Dynamic val = arr.getDynamic(i);
+                    list.add(from(val));
+                }
+                return list;
+            }
+            case String: {
+                ArrayList<SVGLength> list = new ArrayList<>(1);
+                list.add(new SVGLength(dynamic.asString()));
+                return list;
+            }
+            default:
+                return null;
+        }
+    }
 }

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

@@ -21,6 +21,7 @@ import android.util.Base64;
 import android.view.View;
 import android.view.ViewParent;
 
+import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.DisplayMetricsHolder;
 import com.facebook.react.uimanager.ReactCompoundView;
@@ -116,8 +117,8 @@ public class SvgView extends ReactViewGroup implements ReactCompoundView, ReactC
     private float mMinY;
     private float mVbWidth;
     private float mVbHeight;
-    private String mbbWidth;
-    private String mbbHeight;
+    private SVGLength mbbWidth;
+    private SVGLength mbbHeight;
     private String mAlign;
     private int mMeetOrSlice;
     private final Matrix mInvViewBoxMatrix = new Matrix();
@@ -177,15 +178,15 @@ public class SvgView extends ReactViewGroup implements ReactCompoundView, ReactC
     }
 
     @ReactProp(name = "bbWidth")
-    public void setVbWidth(String bbWidth) {
-        mbbWidth = bbWidth;
+    public void setBbWidth(Dynamic bbWidth) {
+        mbbWidth = SVGLength.from(bbWidth);
         invalidate();
         clearChildCache();
     }
 
     @ReactProp(name = "bbHeight")
-    public void setVbHeight(String bbHeight) {
-        mbbHeight = bbHeight;
+    public void setBbHeight(Dynamic bbHeight) {
+        mbbHeight = SVGLength.from(bbHeight);
         invalidate();
         clearChildCache();
     }

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

@@ -11,6 +11,7 @@ package com.horcrux.svg;
 
 import android.util.SparseArray;
 
+import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.views.view.ReactViewGroup;
@@ -89,13 +90,13 @@ class SvgViewManager extends ReactViewManager {
     }
 
     @ReactProp(name = "bbWidth")
-    public void setVbWidth(SvgView node, String bbWidth) {
-        node.setVbWidth(bbWidth);
+    public void setBbWidth(SvgView node, Dynamic bbWidth) {
+        node.setBbWidth(bbWidth);
     }
 
     @ReactProp(name = "bbHeight")
-    public void setVbHeight(SvgView node, String bbHeight) {
-        node.setVbHeight(bbHeight);
+    public void setBbHeight(SvgView node, Dynamic bbHeight) {
+        node.setBbHeight(bbHeight);
     }
 
     @ReactProp(name = "align")

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

@@ -44,7 +44,7 @@ class TextPathView extends TextView {
 
     @ReactProp(name = "startOffset")
     public void setStartOffset(Dynamic startOffset) {
-        mStartOffset = getLengthFromDynamic(startOffset);
+        mStartOffset = SVGLength.from(startOffset);
         invalidate();
     }
 

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

@@ -54,7 +54,7 @@ class TextView extends GroupView {
 
     @ReactProp(name = "textLength")
     public void setTextLength(Dynamic length) {
-        mTextLength = getLengthFromDynamic(length);
+        mTextLength = SVGLength.from(length);
         invalidate();
     }
 
@@ -72,7 +72,7 @@ class TextView extends GroupView {
 
     @ReactProp(name = "baselineShift")
     public void setBaselineShift(Dynamic baselineShift) {
-        mBaselineShift = getStringFromDynamic(baselineShift);
+        mBaselineShift = SVGLength.toString(baselineShift);
         invalidate();
     }
 
@@ -100,31 +100,31 @@ class TextView extends GroupView {
 
     @ReactProp(name = "rotate")
     public void setRotate(Dynamic rotate) {
-        mRotate = getLengthArrayFromDynamic(rotate);
+        mRotate = SVGLength.arrayFrom(rotate);
         invalidate();
     }
 
     @ReactProp(name = "dx")
     public void setDeltaX(Dynamic deltaX) {
-        mDeltaX = getLengthArrayFromDynamic(deltaX);
+        mDeltaX = SVGLength.arrayFrom(deltaX);
         invalidate();
     }
 
     @ReactProp(name = "dy")
     public void setDeltaY(Dynamic deltaY) {
-        mDeltaY = getLengthArrayFromDynamic(deltaY);
+        mDeltaY = SVGLength.arrayFrom(deltaY);
         invalidate();
     }
 
     @ReactProp(name = "x")
     public void setPositionX(Dynamic positionX) {
-        mPositionX = getLengthArrayFromDynamic(positionX);
+        mPositionX = SVGLength.arrayFrom(positionX);
         invalidate();
     }
 
     @ReactProp(name = "y")
     public void setPositionY(Dynamic positionY) {
-        mPositionY = getLengthArrayFromDynamic(positionY);
+        mPositionY = SVGLength.arrayFrom(positionY);
         invalidate();
     }
 

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

@@ -40,25 +40,25 @@ class UseView extends RenderableView {
 
     @ReactProp(name = "x")
     public void setX(Dynamic x) {
-        mX = getLengthFromDynamic(x);
+        mX = SVGLength.from(x);
         invalidate();
     }
 
     @ReactProp(name = "y")
     public void setY(Dynamic y) {
-        mY = getLengthFromDynamic(y);
+        mY = SVGLength.from(y);
         invalidate();
     }
 
     @ReactProp(name = "width")
     public void setWidth(Dynamic width) {
-        mW = getLengthFromDynamic(width);
+        mW = SVGLength.from(width);
         invalidate();
     }
 
     @ReactProp(name = "height")
     public void setHeight(Dynamic height) {
-        mH = getLengthFromDynamic(height);
+        mH = SVGLength.from(height);
         invalidate();
     }
 

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

@@ -544,52 +544,4 @@ abstract public class VirtualView extends ReactViewGroup {
         return mClientRect;
     }
 
-    SVGLength getLengthFromDynamic(Dynamic dynamic) {
-        switch (dynamic.getType()) {
-            case Number:
-                return new SVGLength(dynamic.asDouble());
-            case String:
-                return new SVGLength(dynamic.asString());
-            default:
-                return new SVGLength();
-        }
-    }
-
-    String getStringFromDynamic(Dynamic dynamic) {
-        switch (dynamic.getType()) {
-            case Number:
-                return String.valueOf(dynamic.asDouble());
-            case String:
-                return dynamic.asString();
-            default:
-                return null;
-        }
-    }
-
-    ArrayList<SVGLength> getLengthArrayFromDynamic(Dynamic dynamic) {
-        switch (dynamic.getType()) {
-            case Number: {
-                ArrayList<SVGLength> list = new ArrayList<>(1);
-                list.add(new SVGLength(dynamic.asDouble()));
-                return list;
-            }
-            case Array: {
-                ReadableArray arr = dynamic.asArray();
-                int size = arr.size();
-                ArrayList<SVGLength> list = new ArrayList<>(size);
-                for (int i = 0; i < size; i++) {
-                    Dynamic val = arr.getDynamic(i);
-                    list.add(getLengthFromDynamic(val));
-                }
-                return list;
-            }
-            case String: {
-                ArrayList<SVGLength> list = new ArrayList<>(1);
-                list.add(new SVGLength(dynamic.asString()));
-                return list;
-            }
-            default:
-                return null;
-        }
-    }
 }

elements/Svg.js

@@ -41,10 +41,10 @@ export default class Svg extends Shape {
     setNativeProps = props => {
         const { width, height } = props;
         if (width) {
-            props.bbWidth = String(width);
+            props.bbWidth = width;
         }
         if (height) {
-            props.bbHeight = String(height);
+            props.bbHeight = height;
         }
         this.root.setNativeProps(props);
     };
@@ -98,12 +98,10 @@ export default class Svg extends Shape {
         return (
             <NativeSvgView
                 {...props}
+                bbWidth={width}
+                bbHeight={height}
                 tintColor={color}
                 onLayout={onLayout}
-                bbWidth={String(width)}
-                bbHeight={String(height)}
-                {...extractResponder(props, this)}
-                {...extractViewBox({ viewBox, preserveAspectRatio })}
                 ref={this.refMethod}
                 style={[
                     styles.svg,
@@ -113,6 +111,8 @@ export default class Svg extends Shape {
                     },
                     dimensions,
                 ]}
+                {...extractResponder(props, this)}
+                {...extractViewBox({ viewBox, preserveAspectRatio })}
             >
                 <G
                     {...{

ios/Elements/RNSVGGroup.m

@@ -60,8 +60,8 @@
             }
         } else if ([node isKindOfClass:[RNSVGSvgView class]]) {
             RNSVGSvgView* svgView = (RNSVGSvgView*)node;
-            CGFloat width = [self relativeOnWidthString:svgView.bbWidth];
-            CGFloat height = [self relativeOnHeightString:svgView.bbHeight];
+            CGFloat width = [self relativeOnWidth:svgView.bbWidth];
+            CGFloat height = [self relativeOnHeight:svgView.bbHeight];
             CGRect rect = CGRectMake(0, 0, width, height);
             CGContextClipToRect(context, rect);
             [svgView drawToContext:context withRect:rect];

ios/Elements/RNSVGSvgView.h

@@ -15,8 +15,8 @@
 
 @interface RNSVGSvgView : UIView <RNSVGContainer>
 
-@property (nonatomic, strong) NSString *bbWidth;
-@property (nonatomic, strong) NSString *bbHeight;
+@property (nonatomic, strong) RNSVGLength *bbWidth;
+@property (nonatomic, strong) RNSVGLength *bbHeight;
 @property (nonatomic, assign) CGFloat minX;
 @property (nonatomic, assign) CGFloat minY;
 @property (nonatomic, assign) CGFloat vbWidth;

ios/Elements/RNSVGSvgView.m

@@ -113,9 +113,9 @@
     _vbHeight = vbHeight;
 }
 
-- (void)setBbWidth:(NSString *)bbWidth
+- (void)setBbWidth:(RNSVGLength *)bbWidth
 {
-    if ([bbWidth isEqualToString:_bbWidth]) {
+    if ([bbWidth isEqualTo:_bbWidth]) {
         return;
     }
 
@@ -124,9 +124,9 @@
     _bbWidth = bbWidth;
 }
 
-- (void)setBbHeight:(NSString *)bbHeight
+- (void)setBbHeight:(RNSVGLength *)bbHeight
 {
-    if ([bbHeight isEqualToString:_bbHeight]) {
+    if ([bbHeight isEqualTo:_bbHeight]) {
         return;
     }
 

ios/ViewManagers/RNSVGSvgViewManager.m

@@ -20,8 +20,8 @@ RCT_EXPORT_MODULE()
     return [RNSVGSvgView new];
 }
 
-RCT_EXPORT_VIEW_PROPERTY(bbWidth, NSString)
-RCT_EXPORT_VIEW_PROPERTY(bbHeight, NSString)
+RCT_EXPORT_VIEW_PROPERTY(bbWidth, RNSVGLength*)
+RCT_EXPORT_VIEW_PROPERTY(bbHeight, RNSVGLength*)
 RCT_EXPORT_VIEW_PROPERTY(minX, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(minY, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(vbWidth, CGFloat)

lib/extract/extractProps.js

@@ -7,7 +7,8 @@ import extractOpacity from "./extractOpacity";
 import { idPattern } from "../util";
 
 export default function extractProps(prop, ref) {
-    const props = { ...prop.style, ...prop };
+    const style = prop.style;
+    const props = { ...(style && style.length ? Object.assign({}, ...style) : style), ...prop };
     const { opacity, onLayout, id, clipPath, mask } = props;
     const styleProperties = [];