Add setNativeProps method for most of elements

Example/examples/G.js

@@ -7,7 +7,8 @@ import Svg, {
     Circle,
     Line,
     Rect,
-    Text
+    Text,
+    Use
 } from 'react-native-svg';
 
 class GExample extends Component{
@@ -63,6 +64,7 @@ class GTransform extends Component{
             <G
                 rotate="50"
                 origin="100, 50"
+                id="group"
             >
                 <Line
                     x1="60"
@@ -90,6 +92,7 @@ class GTransform extends Component{
                 >
                     Text grouped with shapes</Text>
             </G>
+            <Use href="#group" x="5" rotate="0" />
         </Svg>;
     }
 }

README.md

@@ -569,6 +569,7 @@ npm install
 2. more Text features support
 3. Pattern element
 4. implement Animated elements
+5. refactor defs element (cannot use id prop for shape elements)
 
 #### Thanks:
 

elements/Circle.js

@@ -20,9 +20,14 @@ class Circle extends Shape {
         svgId: numberProp
     };
 
+    setNativeProps = (...args) => {
+        this.root.setNativeProps(...args);
+    };
+
     render() {
         let props = mergeContext(this.props, this.context);
         return <RNSVGCircle
+            ref={ele => this.root = ele}
             {...this.extractProps(props)}
             cx={props.cx.toString()}
             cy={props.cy.toString()}

elements/Ellipse.js

@@ -20,9 +20,14 @@ class Ellipse extends Shape{
         svgId: numberProp
     };
 
+    setNativeProps = (...args) => {
+        this.root.setNativeProps(...args);
+    };
+
     render() {
         let props = mergeContext(this.props, this.context);
         return <RNSVGEllipse
+            ref={ele => this.root = ele}
             {...this.extractProps(props)}
             cx={props.cx.toString()}
             cy={props.cy.toString()}

elements/G.js

@@ -33,6 +33,14 @@ class G extends Component{
         return _.defaults({}, this.context, context);
     };
 
+    setNativeProps = (...args) => {
+        this.getNativeElement().setNativeProps(...args);
+    };
+
+    getNativeElement = () => {
+        return this.refs.root || this.root;
+    };
+
     render() {
         if (this.props.id) {
             return <Defs.Item
@@ -42,12 +50,14 @@ class G extends Component{
             >
                 <G
                     {...this.props}
+                    ref={ele => this.root = ele.refs.root}
                     id={null}
                 />
             </Defs.Item>;
         } else {
             return <RNSVGGroup
                 {...extractProps(this.props, {transform: true})}
+                ref="root"
                 asClipPath={this.props.asClipPath}
             >
                 {this.props.children}

elements/Image.js

@@ -19,10 +19,14 @@ class Image extends Shape {
         //preserveAspectRatio: PropTypes.string
     };
 
+    setNativeProps = (...args) => {
+        this.root.setNativeProps(...args);
+    };
 
     render() {
         let {props} = this;
         return <RNSVGImage
+            ref={ele => this.root = ele}
             {...this.extractProps(props, {transform: true, responder: true})}
             x={props.x.toString()}
             y={props.y.toString()}

elements/Line.js

@@ -20,9 +20,14 @@ class Line extends Shape {
         svgId: numberProp
     };
 
+    setNativeProps = (...args) => {
+        this.root.setNativeProps(...args);
+    };
+
     render() {
         let props = mergeContext(this.props, this.context);
         return <RNSVGLine
+            ref={ele => this.root = ele}
             {...this.extractProps(props)}
             x1={props.x1.toString()}
             y1={props.y1.toString()}

elements/Path.js

@@ -30,6 +30,14 @@ class Path extends Shape {
         }
     };
 
+    setNativeProps = (...args) => {
+        this.getNativeElement().setNativeProps(...args);
+    };
+
+    getNativeElement = () => {
+        return this.refs.root || this.root;
+    };
+
     render() {
         let props = mergeContext(this.props, this.context);
 
@@ -39,13 +47,18 @@ class Path extends Shape {
                 svgId={props.svgId}
                 visible={true}
             >
-                <Path {...props} id={null} />
+                <Path
+                    ref={ele => this.root = ele.refs.root}
+                    {...props}
+                    id={null}
+                />
             </Defs.Item>;
         }
 
         let d = new SerializablePath(props.d).toJSON();
         return (
             <RNSVGPath
+                ref="root"
                 {...this.extractProps(props)}
                 d={d}
             />

elements/Polygon.js

@@ -9,8 +9,13 @@ class Polygon extends Component{
         points: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
     };
 
+    setNativeProps = (...args) => {
+        this.root.getNativeElement().setNativeProps(...args);
+    };
+
     render() {
         return <Path
+            ref={ele => this.root = ele}
             {...this.props}
             d={`M${this.props.points.trim().replace(/\s+/g, 'L')}z`}
         />;

elements/Polyline.js

@@ -9,8 +9,13 @@ class Polyline extends Component{
         points: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
     };
 
+    setNativeProps = (...args) => {
+        this.root.getNativeElement().setNativeProps(...args);
+    };
+
     render() {
         return <Path
+            ref={ele => this.root = ele}
             {...this.props}
             d={`M${this.props.points.trim().replace(/\s+/g, 'L')}`}
         />;

elements/Rect.js

@@ -21,10 +21,15 @@ class Rect extends Shape {
         svgId: numberProp
     };
 
+    setNativeProps = (...args) => {
+        this.root.setNativeProps(...args);
+    };
+
     render() {
         let props = mergeContext(this.props, this.context);
 
         return <RNSVGRect
+            ref={ele => this.root = ele}
             {...this.extractProps({
                 ...props,
                 x: null,

elements/Text.js

@@ -25,6 +25,14 @@ class Text extends Shape {
         svgId: numberProp
     };
 
+    setNativeProps = (...args) => {
+        this.getNativeElement().setNativeProps(...args);
+    };
+
+    getNativeElement = () => {
+        return this.refs.root || this.root;
+    };
+
     render() {
         let props = mergeContext(this.props, this.context);
 
@@ -39,6 +47,7 @@ class Text extends Shape {
 
         if (this.props.id) {
             return <Defs.Item
+                ref={ele => this.root = ele.refs.root}
                 id={this.props.id}
                 svgId={this.props.svgId}
                 visible={true}
@@ -50,6 +59,7 @@ class Text extends Shape {
 
         return (
             <RNSVGText
+                ref="root"
                 {...extractProps({...props, x, y})}
                 {...extractText(props)}
             />

package.json

@@ -1,5 +1,5 @@
 {
-    "version": "3.1.0",
+    "version": "3.1.1",
     "name": "react-native-svg",
     "description": "react native svg library",
     "repository": {