Lift default setNativeProps and refMethod implementation to Shape class

elements/Circle.js

@@ -12,18 +12,12 @@ export default class Circle extends Shape {
         r: 0,
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         const { props } = this;
         const { cx, cy, r } = props;
         return (
             <RNSVGCircle
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 {...extractProps(props, this)}
                 cx={cx}
                 cy={cy}

elements/ClipPath.js

@@ -5,17 +5,11 @@ import extractClipPath from "../lib/extract/extractClipPath";
 export default class ClipPath extends Component {
     static displayName = "ClipPath";
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         const { id, children } = this.props;
         return (
             <RNSVGClipPath
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 name={id}
                 {...extractClipPath(this.props)}
             >

elements/Ellipse.js

@@ -13,18 +13,12 @@ export default class Ellipse extends Shape {
         ry: 0,
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         const { props } = this;
         const { cx, cy, rx, ry } = props;
         return (
             <RNSVGEllipse
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 {...extractProps(props, this)}
                 cx={cx}
                 cy={cy}

elements/G.js

@@ -20,11 +20,9 @@ export default class G extends Shape {
         const { props } = this;
         return (
             <RNSVGGroup
+                ref={this.refMethod}
                 {...extractProps(props, this)}
                 font={extractFont(props)}
-                ref={ele => {
-                    this.root = ele;
-                }}
             >
                 {props.children}
             </RNSVGGroup>

elements/Image.js

@@ -6,7 +6,7 @@ import Shape from "./Shape";
 
 const spacesRegExp = /\s+/;
 
-export default class Image extends Shape {
+export default class SvgImage extends Shape {
     static displayName = "Image";
 
     static defaultProps = {
@@ -17,19 +17,13 @@ export default class Image extends Shape {
         preserveAspectRatio: "xMidYMid meet",
     };
 
-    setNativeProps = props => {
-        this.root.setNativeProps(props);
-    };
-
     render() {
         const { props } = this;
         const { preserveAspectRatio, x, y, width, height, href } = props;
         const modes = preserveAspectRatio.trim().split(spacesRegExp);
         return (
             <RNSVGImage
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 {...extractProps({ ...props, x: null, y: null }, this)}
                 x={x}
                 y={y}

elements/Line.js

@@ -13,18 +13,12 @@ export default class Line extends Shape {
         y2: 0,
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         const { props } = this;
         const { x1, y1, x2, y2 } = props;
         return (
             <RNSVGLine
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 {...extractProps(props, this)}
                 x1={x1}
                 y1={y1}

elements/LinearGradient.js

@@ -12,18 +12,12 @@ export default class LinearGradient extends Component {
         y2: "0%",
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         const { props } = this;
         const { x1, y1, x2, y2 } = props;
         return (
             <RNSVGLinearGradient
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 x1={x1}
                 y1={y1}
                 x2={x2}

elements/Mask.js

@@ -6,10 +6,6 @@ import units from "../lib/units";
 export default class Mask extends Component {
     static displayName = "Mask";
 
-    setNativeProps = props => {
-        this.root.setNativeProps(props);
-    };
-
     render() {
         const { props } = this;
         const {
@@ -26,9 +22,7 @@ export default class Mask extends Component {
         } = props;
         return (
             <RNSVGMask
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 name={id}
                 x={x}
                 y={y}

elements/Path.js

@@ -6,17 +6,11 @@ import Shape from "./Shape";
 export default class Path extends Shape {
     static displayName = "Path";
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         const { props } = this;
         return (
             <RNSVGPath
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 {...extractProps(props, this)}
                 d={props.d}
             />

elements/Pattern.js

@@ -7,10 +7,6 @@ import units from "../lib/units";
 export default class Pattern extends Component {
     static displayName = "Pattern";
 
-    setNativeProps = props => {
-        this.root.setNativeProps(props);
-    };
-
     render() {
         const { props } = this;
         const {
@@ -29,9 +25,7 @@ export default class Pattern extends Component {
         } = props;
         return (
             <RNSVGPattern
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 name={id}
                 x={x}
                 y={y}

elements/Polygon.js

@@ -23,11 +23,9 @@ export default class Polygon extends Shape {
         const { points } = props;
         return (
             <Path
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
-                {...props}
                 d={`M${extractPolyPoints(points)}z`}
+                {...props}
             />
         );
     }

elements/Polyline.js

@@ -23,11 +23,9 @@ export default class Polyline extends Shape {
         const { points } = props;
         return (
             <Path
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
-                {...this.props}
                 d={`M${extractPolyPoints(points)}`}
+                {...props}
             />
         );
     }

elements/RadialGradient.js

@@ -13,18 +13,12 @@ export default class RadialGradient extends Component {
         r: "50%",
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         const { props } = this;
         const { fx, fy, rx, ry, r, cx, cy } = props;
         return (
             <RNSVGRadialGradient
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 fx={fx}
                 fy={fy}
                 rx={rx || r}

elements/Rect.js

@@ -15,18 +15,12 @@ export default class Rect extends Shape {
         ry: 0,
     };
 
-    setNativeProps = props => {
-        this.root.setNativeProps(props);
-    };
-
     render() {
         const { props } = this;
         const { x, y, width, height, rx, ry } = props;
         return (
             <RNSVGRect
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 {...extractProps(
                     {
                         ...props,

elements/Shape.js

@@ -15,4 +15,10 @@ export default class Shape extends Component {
         }
         this.state = this.touchableGetInitialState();
     }
+    refMethod = ref => {
+        this.root = ref;
+    };
+    setNativeProps = props => {
+        this.root.setNativeProps(props);
+    };
 }

elements/Svg.js

@@ -104,9 +104,7 @@ export default class Svg extends Shape {
                 bbHeight={String(height)}
                 {...extractResponder(props, this)}
                 {...extractViewBox({ viewBox, preserveAspectRatio })}
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 style={[
                     styles.svg,
                     style,

elements/TSpan.js

@@ -25,9 +25,7 @@ export default class TSpan extends Shape {
         const props = this.props;
         return (
             <RNSVGTSpan
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 {...extractProps(
                     {
                         ...props,

elements/Text.js

@@ -26,9 +26,7 @@ export default class Text extends Shape {
         const props = this.props;
         return (
             <RNSVGText
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 {...extractProps(
                     {
                         ...props,

elements/TextPath.js

@@ -39,18 +39,7 @@ export default class TextPath extends Shape {
         if (match) {
             return (
                 <RNSVGTextPath
-                    ref={ele => {
+                    ref={this.refMethod}
-                        this.root = ele;
-                    }}
-                    {...{
-                        href: match,
-                        startOffset: startOffset || 0,
-                        method,
-                        spacing,
-                        side,
-                        alignmentBaseline,
-                        midLine,
-                    }}
                     {...extractProps(
                         {
                             ...props,
@@ -65,6 +54,15 @@ export default class TextPath extends Shape {
                         },
                         true,
                     )}
+                    {...{
+                        href: match,
+                        startOffset: startOffset || 0,
+                        method,
+                        spacing,
+                        side,
+                        alignmentBaseline,
+                        midLine,
+                    }}
                 />
             );
         }
@@ -76,9 +74,7 @@ export default class TextPath extends Shape {
         );
         return (
             <TSpan
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
             >
                 {children}
             </TSpan>

elements/Use.js

@@ -1,5 +1,5 @@
 import React from "react";
-import {requireNativeComponent} from "react-native";
+import { requireNativeComponent } from "react-native";
 import extractProps from "../lib/extract/extractProps";
 import { idPattern } from "../lib/util";
 import Shape from "./Shape";
@@ -12,10 +12,6 @@ export default class Use extends Shape {
         height: 0,
     };
 
-    setNativeProps = props => {
-        this.root.setNativeProps(props);
-    };
-
     render() {
         const { props } = this;
         const { children, width, height, href } = props;
@@ -34,9 +30,7 @@ export default class Use extends Shape {
 
         return (
             <RNSVGUse
-                ref={ele => {
+                ref={this.refMethod}
-                    this.root = ele;
-                }}
                 {...extractProps(props, this)}
                 href={match}
                 width={width}

lib/util.js

@@ -9,4 +9,4 @@ export function pickNotNil(object) {
     return result;
 }
 
-export const idPattern = /^#(.+)$/;
+export const idPattern = /#([^\)]+)\)?$/;