diff --git a/Example/examples/G.js b/Example/examples/G.js
index 725d5bfa..674801b3 100644
--- a/Example/examples/G.js
+++ b/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{
Text grouped with shapes
+
;
}
}
diff --git a/README.md b/README.md
index 115ce654..758e1cca 100644
--- a/README.md
+++ b/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:
diff --git a/elements/Circle.js b/elements/Circle.js
index 17991f96..4d0b125f 100644
--- a/elements/Circle.js
+++ b/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 this.root = ele}
{...this.extractProps(props)}
cx={props.cx.toString()}
cy={props.cy.toString()}
diff --git a/elements/Ellipse.js b/elements/Ellipse.js
index e8b0f352..31eb41b4 100644
--- a/elements/Ellipse.js
+++ b/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 this.root = ele}
{...this.extractProps(props)}
cx={props.cx.toString()}
cy={props.cy.toString()}
diff --git a/elements/G.js b/elements/G.js
index 2c036ae1..9c7fdcd2 100644
--- a/elements/G.js
+++ b/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
this.root = ele.refs.root}
id={null}
/>
;
} else {
return
{this.props.children}
diff --git a/elements/Image.js b/elements/Image.js
index 41fd1ac0..33b00e1e 100644
--- a/elements/Image.js
+++ b/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 this.root = ele}
{...this.extractProps(props, {transform: true, responder: true})}
x={props.x.toString()}
y={props.y.toString()}
diff --git a/elements/Line.js b/elements/Line.js
index 29c0be2a..dd76166b 100644
--- a/elements/Line.js
+++ b/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 this.root = ele}
{...this.extractProps(props)}
x1={props.x1.toString()}
y1={props.y1.toString()}
diff --git a/elements/Path.js b/elements/Path.js
index 1d395d66..a91776d7 100644
--- a/elements/Path.js
+++ b/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}
>
-
+ this.root = ele.refs.root}
+ {...props}
+ id={null}
+ />
;
}
let d = new SerializablePath(props.d).toJSON();
return (
diff --git a/elements/Polygon.js b/elements/Polygon.js
index d7877b22..c5608ec2 100644
--- a/elements/Polygon.js
+++ b/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 this.root = ele}
{...this.props}
d={`M${this.props.points.trim().replace(/\s+/g, 'L')}z`}
/>;
diff --git a/elements/Polyline.js b/elements/Polyline.js
index 207ecaf5..b8afb1db 100644
--- a/elements/Polyline.js
+++ b/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 this.root = ele}
{...this.props}
d={`M${this.props.points.trim().replace(/\s+/g, 'L')}`}
/>;
diff --git a/elements/Rect.js b/elements/Rect.js
index ad661d46..bc315b0d 100644
--- a/elements/Rect.js
+++ b/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 this.root = ele}
{...this.extractProps({
...props,
x: null,
diff --git a/elements/Text.js b/elements/Text.js
index c2bfe5fa..c4a8b62f 100644
--- a/elements/Text.js
+++ b/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 this.root = ele.refs.root}
id={this.props.id}
svgId={this.props.svgId}
visible={true}
@@ -50,6 +59,7 @@ class Text extends Shape {
return (
diff --git a/package.json b/package.json
index fa21c33c..57d3d727 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "version": "3.1.0",
+ "version": "3.1.1",
"name": "react-native-svg",
"description": "react native svg library",
"repository": {