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": {