Simplify native animation and setNativeProps

Remove need for prefixed property names:
{use,mask,image,bb,pattern,rect}{width,height}
Can simply use width and height instead, and,
 x and y instead of position{X,Y} on Text and TSpan

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

@@ -316,6 +316,7 @@ abstract public class RenderableShadowNode extends VirtualNode {
 
             RectF clientRect = new RectF();
             path.computeBounds(clientRect, true);
+            mBox = new RectF(clientRect);
             Matrix svgToViewMatrix = new Matrix(canvas.getMatrix());
             svgToViewMatrix.mapRect(clientRect);
             this.setClientRect(clientRect);
@@ -397,10 +398,6 @@ abstract public class RenderableShadowNode extends VirtualNode {
         } else if (colorType == 1) {
             Brush brush = getSvgShadowNode().getDefinedBrush(colors.getString(1));
             if (brush != null) {
-                if (mBox == null) {
-                    mBox = new RectF();
-                    mPath.computeBounds(mBox, true);
-                }
                 brush.setupPaint(paint, mBox, mScale, opacity);
             }
         } else if (colorType == 2) {

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

@@ -318,11 +318,21 @@ class RenderableViewManager<T extends VirtualNode> extends ViewGroupManager<Rend
                 node.shadowNode.setPositionX(positionX);
             }
 
+            @ReactProp(name = "x")
+            public void setX(RenderableView<TextShadowNode> node, Dynamic positionX) {
+                node.shadowNode.setPositionX(positionX);
+            }
+
             @ReactProp(name = "positionY")
             public void setPositionY(RenderableView<TextShadowNode> node, Dynamic positionY) {
                 node.shadowNode.setPositionY(positionY);
             }
 
+            @ReactProp(name = "y")
+            public void setY(RenderableView<TextShadowNode> node, Dynamic positionY) {
+                node.shadowNode.setPositionY(positionY);
+            }
+
             @ReactProp(name = "font")
             public void setFont(RenderableView<TextShadowNode> node, @Nullable ReadableMap font) {
                 node.shadowNode.setFont(font);
@@ -339,12 +349,22 @@ class RenderableViewManager<T extends VirtualNode> extends ViewGroupManager<Rend
             }
 
             @ReactProp(name = "positionX")
-            public void setPositionX(RenderableView<TSpanShadowNode> node, Dynamic positionX) {
+            public void setPositionX(RenderableView<TextShadowNode> node, Dynamic positionX) {
+                node.shadowNode.setPositionX(positionX);
+            }
+
+            @ReactProp(name = "x")
+            public void setX(RenderableView<TextShadowNode> node, Dynamic positionX) {
                 node.shadowNode.setPositionX(positionX);
             }
 
             @ReactProp(name = "positionY")
-            public void setPositionY(RenderableView<TSpanShadowNode> node, Dynamic positionY) {
+            public void setPositionY(RenderableView<TextShadowNode> node, Dynamic positionY) {
+                node.shadowNode.setPositionY(positionY);
+            }
+
+            @ReactProp(name = "y")
+            public void setY(RenderableView<TextShadowNode> node, Dynamic positionY) {
                 node.shadowNode.setPositionY(positionY);
             }
         };
@@ -399,12 +419,22 @@ class RenderableViewManager<T extends VirtualNode> extends ViewGroupManager<Rend
             }
 
             @ReactProp(name = "imagewidth")
+            public void setImageWidth(RenderableView<ImageShadowNode> node, String width) {
+                node.shadowNode.setWidth(width);
+            }
+
+            @ReactProp(name = "width")
             public void setWidth(RenderableView<ImageShadowNode> node, String width) {
                 node.shadowNode.setWidth(width);
             }
 
             @ReactProp(name = "imageheight")
-            public void seHeight(RenderableView<ImageShadowNode> node, String height) {
+            public void setImageHeight(RenderableView<ImageShadowNode> node, String height) {
+                node.shadowNode.seHeight(height);
+            }
+
+            @ReactProp(name = "height")
+            public void setHeight(RenderableView<ImageShadowNode> node, String height) {
                 node.shadowNode.seHeight(height);
             }
 
@@ -511,16 +541,24 @@ class RenderableViewManager<T extends VirtualNode> extends ViewGroupManager<Rend
             }
 
             @ReactProp(name = "rectwidth")
+            public void setRectWidth(RenderableView<RectShadowNode> node, Dynamic width) {
+                node.shadowNode.setWidth(width);
+            }
+
+            @ReactProp(name = "width")
             public void setWidth(RenderableView<RectShadowNode> node, Dynamic width) {
                 node.shadowNode.setWidth(width);
             }
 
-
             @ReactProp(name = "rectheight")
-            public void setHeight(RenderableView<RectShadowNode> node, Dynamic height) {
+            public void setRectHeight(RenderableView<RectShadowNode> node, Dynamic height) {
                 node.shadowNode.setHeight(height);
             }
 
+            @ReactProp(name = "height")
+            public void setHeight(RenderableView<RectShadowNode> node, Dynamic height) {
+                node.shadowNode.setHeight(height);
+            }
 
             @ReactProp(name = "rx")
             public void setRx(RenderableView<RectShadowNode> node, String rx) {
@@ -551,11 +589,21 @@ class RenderableViewManager<T extends VirtualNode> extends ViewGroupManager<Rend
             }
 
             @ReactProp(name = "usewidth")
+            public void setUseWidth(RenderableView<UseShadowNode> node, String width) {
+                node.shadowNode.setWidth(width);
+            }
+
+            @ReactProp(name = "width")
             public void setWidth(RenderableView<UseShadowNode> node, String width) {
                 node.shadowNode.setWidth(width);
             }
 
             @ReactProp(name = "useheight")
+            public void setUseHeight(RenderableView<UseShadowNode> node, String height) {
+                node.shadowNode.setHeight(height);
+            }
+
+            @ReactProp(name = "height")
             public void setHeight(RenderableView<UseShadowNode> node, String height) {
                 node.shadowNode.setHeight(height);
             }
@@ -611,11 +659,21 @@ class RenderableViewManager<T extends VirtualNode> extends ViewGroupManager<Rend
             }
 
             @ReactProp(name = "patternwidth")
+            public void setPatternWidth(RenderableView<PatternShadowNode> node, String width) {
+                node.shadowNode.setWidth(width);
+            }
+
+            @ReactProp(name = "width")
             public void setWidth(RenderableView<PatternShadowNode> node, String width) {
                 node.shadowNode.setWidth(width);
             }
 
             @ReactProp(name = "patternheight")
+            public void setPatternHeight(RenderableView<PatternShadowNode> node, String height) {
+                node.shadowNode.setHeight(height);
+            }
+
+            @ReactProp(name = "height")
             public void setHeight(RenderableView<PatternShadowNode> node, String height) {
                 node.shadowNode.setHeight(height);
             }
@@ -681,11 +739,21 @@ class RenderableViewManager<T extends VirtualNode> extends ViewGroupManager<Rend
             }
 
             @ReactProp(name = "maskwidth")
+            public void setMaskWidth(RenderableView<MaskShadowNode> node, String width) {
+                node.shadowNode.setWidth(width);
+            }
+
+            @ReactProp(name = "width")
             public void setWidth(RenderableView<MaskShadowNode> node, String width) {
                 node.shadowNode.setWidth(width);
             }
 
             @ReactProp(name = "maskheight")
+            public void setMaskHeight(RenderableView<MaskShadowNode> node, String height) {
+                node.shadowNode.setHeight(height);
+            }
+
+            @ReactProp(name = "height")
             public void setHeight(RenderableView<MaskShadowNode> node, String height) {
                 node.shadowNode.setHeight(height);
             }

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

@@ -59,7 +59,7 @@ abstract class VirtualNode extends LayoutShadowNode {
     Matrix mTransform = new Matrix();
     Matrix mInvMatrix = new Matrix();
     boolean mInvertible = true;
-    private RectF mClientRect;
+    RectF mClientRect;
 
     private int mClipRule;
     private @Nullable String mClipPath;
@@ -113,7 +113,6 @@ abstract class VirtualNode extends LayoutShadowNode {
         canvasWidth = -1;
         mRegion = null;
         mPath = null;
-        mBox = null;
     }
 
     void releaseCachedPath() {

ios/ViewManagers/RNSVGImageManager.m

@@ -19,7 +19,7 @@ RCT_EXPORT_MODULE()
 {
     RNSVGImage *svgImage = [RNSVGImage new];
     svgImage.bridge = self.bridge;
-    
+
     return svgImage;
 }
 
@@ -27,6 +27,8 @@ RCT_EXPORT_VIEW_PROPERTY(x, NSString)
 RCT_EXPORT_VIEW_PROPERTY(y, NSString)
 RCT_EXPORT_VIEW_PROPERTY(imagewidth, NSString)
 RCT_EXPORT_VIEW_PROPERTY(imageheight, NSString)
+RCT_REMAP_VIEW_PROPERTY(width, imagewidth, NSString)
+RCT_REMAP_VIEW_PROPERTY(height, imageheight, NSString)
 RCT_EXPORT_VIEW_PROPERTY(src, id)
 RCT_EXPORT_VIEW_PROPERTY(align, NSString)
 RCT_EXPORT_VIEW_PROPERTY(meetOrSlice, RNSVGVBMOS)

ios/ViewManagers/RNSVGMaskManager.m

@@ -22,6 +22,8 @@ RCT_EXPORT_VIEW_PROPERTY(x, NSString)
 RCT_EXPORT_VIEW_PROPERTY(y, NSString)
 RCT_EXPORT_VIEW_PROPERTY(maskwidth, NSString)
 RCT_EXPORT_VIEW_PROPERTY(maskheight, NSString)
+RCT_REMAP_VIEW_PROPERTY(width, maskwidth, NSString)
+RCT_REMAP_VIEW_PROPERTY(height, maskheight, NSString)
 RCT_EXPORT_VIEW_PROPERTY(maskUnits, RNSVGUnits)
 RCT_EXPORT_VIEW_PROPERTY(maskContentUnits, RNSVGUnits)
 RCT_EXPORT_VIEW_PROPERTY(maskTransform, CGAffineTransform)

ios/ViewManagers/RNSVGPatternManager.m

@@ -22,6 +22,8 @@ RCT_EXPORT_VIEW_PROPERTY(x, NSString)
 RCT_EXPORT_VIEW_PROPERTY(y, NSString)
 RCT_EXPORT_VIEW_PROPERTY(patternwidth, NSString)
 RCT_EXPORT_VIEW_PROPERTY(patternheight, NSString)
+RCT_REMAP_VIEW_PROPERTY(width, patternwidth, NSString)
+RCT_REMAP_VIEW_PROPERTY(height, patternheight, NSString)
 RCT_EXPORT_VIEW_PROPERTY(patternUnits, RNSVGUnits)
 RCT_EXPORT_VIEW_PROPERTY(patternContentUnits, RNSVGUnits)
 RCT_EXPORT_VIEW_PROPERTY(patternTransform, CGAffineTransform)

ios/ViewManagers/RNSVGRectManager.m

@@ -41,6 +41,25 @@ RCT_CUSTOM_VIEW_PROPERTY(rectwidth, id, RNSVGRect)
         view.rectwidth = [NSString stringWithFormat:@"%f", [json floatValue]];
     }
 }
+RCT_CUSTOM_VIEW_PROPERTY(height, id, RNSVGRect)
+{
+    if ([json isKindOfClass:[NSString class]]) {
+        NSString *stringValue = (NSString *)json;
+        view.rectheight = stringValue;
+    } else {
+        view.rectheight = [NSString stringWithFormat:@"%f", [json floatValue]];
+    }
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(width, id, RNSVGRect)
+{
+    if ([json isKindOfClass:[NSString class]]) {
+        NSString *stringValue = (NSString *)json;
+        view.rectwidth = stringValue;
+    } else {
+        view.rectwidth = [NSString stringWithFormat:@"%f", [json floatValue]];
+    }
+}
 
 RCT_EXPORT_VIEW_PROPERTY(rx, NSString)
 RCT_EXPORT_VIEW_PROPERTY(ry, NSString)

ios/ViewManagers/RNSVGTextManager.m

@@ -46,6 +46,29 @@ RCT_CUSTOM_VIEW_PROPERTY(positionY, id, RNSVGText)
         view.positionY = [NSArray arrayWithObject:[NSString stringWithFormat:@"%f", [json floatValue]]];
     }
 }
+RCT_CUSTOM_VIEW_PROPERTY(x, id, RNSVGText)
+{
+    if ([json isKindOfClass:[NSArray class]]) {
+        NSArray<NSString *> *arrayValue = (NSArray<NSString *> *)json;
+        view.positionX = arrayValue;
+    } else if ([json isKindOfClass:[NSString class]]) {
+        view.positionX = [NSArray arrayWithObject:json];
+    } else if ([json isKindOfClass:[NSNumber class]]) {
+        view.positionX = [NSArray arrayWithObject:[NSString stringWithFormat:@"%f", [json floatValue]]];
+    }
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(y, id, RNSVGText)
+{
+    if ([json isKindOfClass:[NSArray class]]) {
+        NSArray<NSString *> *arrayValue = (NSArray<NSString *> *)json;
+        view.positionY = arrayValue;
+    } else if ([json isKindOfClass:[NSString class]]) {
+        view.positionY = [NSArray arrayWithObject:json];
+    } else if ([json isKindOfClass:[NSNumber class]]) {
+        view.positionY = [NSArray arrayWithObject:[NSString stringWithFormat:@"%f", [json floatValue]]];
+    }
+}
 RCT_EXPORT_VIEW_PROPERTY(rotate, NSArray<NSString *>)
 RCT_EXPORT_VIEW_PROPERTY(font, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(textLength, NSString)

ios/ViewManagers/RNSVGUseManager.m

@@ -21,5 +21,7 @@ RCT_EXPORT_MODULE()
 RCT_EXPORT_VIEW_PROPERTY(href, NSString)
 RCT_EXPORT_VIEW_PROPERTY(usewidth, NSString)
 RCT_EXPORT_VIEW_PROPERTY(useheight, NSString)
+RCT_REMAP_VIEW_PROPERTY(width, usewidth, NSString)
+RCT_REMAP_VIEW_PROPERTY(height, useheight, NSString)
 
 @end

lib/attributes.js

@@ -97,6 +97,8 @@ const GroupAttributes = {
 const UseAttributes = {
     ...RenderableAttributes,
     href: true,
+    width: true,
+    height: true,
     usewidth: true,
     useheight: true,
 };
@@ -129,7 +131,9 @@ const TextAttributes = {
     deltaY: arrayDiffer,
     rotate: arrayDiffer,
     positionX: arrayDiffer,
-    positionY: arrayDiffer
+    positionY: arrayDiffer,
+    x: arrayDiffer,
+    y: arrayDiffer
 };
 
 const TextPathAttributes = {
@@ -167,6 +171,8 @@ const PatternAttributes = {
     name: true,
     x: true,
     y: true,
+    width: true,
+    height: true,
     patternwidth: true,
     patternheight: true,
     patternUnits: true,
@@ -180,6 +186,8 @@ const MaskAttributes = {
     name: true,
     x: true,
     y: true,
+    width: true,
+    height: true,
     maskwidth: true,
     maskheight: true,
     maskUnits: true,
@@ -227,6 +235,8 @@ const ImageAttributes = {
     ...RenderableAttributes,
     x: true,
     y: true,
+    width: true,
+    height: true,
     imagewidth: true,
     imageheight: true,
     src: true,
@@ -246,6 +256,8 @@ const RectAttributes = {
     ...RenderableAttributes,
     x: true,
     y: true,
+    width: true,
+    height: true,
     rectwidth: true,
     rectheight: true,
     rx: true,

lib/extract/extractText.js

@@ -139,6 +139,8 @@ export default function(props, container) {
         content,
         positionX,
         positionY,
+        x: positionX,
+        y: positionY,
         rotate,
         deltaX,
         deltaY,