Fixes for animation of width and height

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

@@ -13,6 +13,9 @@ import android.graphics.Canvas;
 import android.graphics.Paint;
 import android.graphics.Path;
 import android.graphics.RectF;
+
+import com.facebook.react.bridge.Dynamic;
+import com.facebook.react.bridge.ReadableType;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
 /**
@@ -41,15 +44,22 @@ class RectShadowNode extends RenderableShadowNode {
     }
 
     @ReactProp(name = "rectwidth")
-    public void setWidth(String width) {
-        mW = width;
+    public void setWidth(Dynamic width) {
+        if (width.getType() == ReadableType.String) {
+            mW = width.asString();
+        } else {
+            mW = String.valueOf(width.asDouble());
+        }
         markUpdated();
     }
 
-
     @ReactProp(name = "rectheight")
-    public void setHeight(String height) {
-        mH = height;
+    public void setHeight(Dynamic height) {
+        if (height.getType() == ReadableType.String) {
+            mH = height.asString();
+        } else {
+            mH = String.valueOf(height.asDouble());
+        }
         markUpdated();
     }
 

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

@@ -304,13 +304,13 @@ class RenderableViewManager<T extends VirtualNode> extends ViewGroupManager<Rend
             }
 
             @ReactProp(name = "rectwidth")
-            public void setWidth(RenderableView<RectShadowNode> node, String width) {
+            public void setWidth(RenderableView<RectShadowNode> node, Dynamic width) {
                 node.shadowNode.setWidth(width);
             }
 
 
             @ReactProp(name = "rectheight")
-            public void setHeight(RenderableView<RectShadowNode> node, String height) {
+            public void setHeight(RenderableView<RectShadowNode> node, Dynamic height) {
                 node.shadowNode.setHeight(height);
             }
 

elements/Image.js

@@ -31,8 +31,14 @@ export default class extends Shape {
         preserveAspectRatio: "xMidYMid meet",
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
+    setNativeProps = (props) => {
+        if (props.width) {
+            props.imagewidth = `${props.width}`;
+        }
+        if (props.height) {
+            props.imageheight = `${props.height}`;
+        }
+        this.root.setNativeProps(props);
     };
 
     render() {

elements/Mask.js

@@ -22,6 +22,16 @@ export default class extends Component {
         ]),
     };
 
+    setNativeProps = (props) => {
+        if (props.width) {
+            props.maskwidth = `${props.width}`;
+        }
+        if (props.height) {
+            props.maskheight = `${props.height}`;
+        }
+        this.root.setNativeProps(props);
+    };
+
     render() {
         const { props } = this;
         const {
@@ -48,6 +58,9 @@ export default class extends Component {
 
         return (
             <RNSVGMask
+                ref={ele => {
+                    this.root = ele;
+                }}
                 name={id}
                 x={`${x}`}
                 y={`${y}`}

elements/Pattern.js

@@ -25,6 +25,16 @@ export default class extends Component {
         preserveAspectRatio: PropTypes.string,
     };
 
+    setNativeProps = (props) => {
+        if (props.width) {
+            props.patternwidth = `${props.width}`;
+        }
+        if (props.height) {
+            props.patternheight = `${props.height}`;
+        }
+        this.root.setNativeProps(props);
+    };
+
     render() {
         const { props } = this;
         const {
@@ -53,6 +63,9 @@ export default class extends Component {
 
         return (
             <RNSVGPattern
+                ref={ele => {
+                    this.root = ele;
+                }}
                 name={id}
                 x={`${x}`}
                 y={`${y}`}

elements/Rect.js

@@ -28,8 +28,14 @@ export default class extends Shape {
         ry: 0
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
+    setNativeProps = (props) => {
+        if (props.width) {
+            props.rectwidth = `${props.width}`;
+        }
+        if (props.height) {
+            props.rectheight = `${props.height}`;
+        }
+        this.root.setNativeProps(props);
     };
 
     render() {

elements/Svg.js

@@ -62,8 +62,14 @@ class Svg extends Shape {
         this.root.measureLayout(...args);
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
+    setNativeProps = (props) => {
+        if (props.width) {
+            props.bbWidth = `${props.width}`;
+        }
+        if (props.height) {
+            props.bbHeight = `${props.height}`;
+        }
+        this.root.setNativeProps(props);
     };
 
     toDataURL = callback => {

elements/Use.js

@@ -22,8 +22,14 @@ export default class extends Shape {
         height: 0
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
+    setNativeProps = (props) => {
+        if (props.width) {
+            props.usewidth = `${props.width}`;
+        }
+        if (props.height) {
+            props.useheight = `${props.height}`;
+        }
+        this.root.setNativeProps(props);
     };
 
     render() {