Fix setNativeProps for all elements that inherit from Shape. The native

props being set were not passing through extractProps, leading to
various mismatches in the values.
software-mansion#180
software-mansion#326

Author: udfalkso

elements/Circle.js

@@ -21,10 +21,6 @@ export default class extends Shape {
         r: 0
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         let props = this.props;
         return <RNSVGCircle

elements/Ellipse.js

@@ -23,10 +23,6 @@ export default class extends Shape{
         ry: 0
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         let props = this.props;
 

elements/G.js

@@ -10,10 +10,6 @@ export default class extends Shape{
 
     static propTypes = pathProps;
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         let {props} = this;
 

elements/Image.js

@@ -31,10 +31,6 @@ export default class extends Shape {
         preserveAspectRatio: 'xMidYMid meet'
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         let {props} = this;
         let modes = props.preserveAspectRatio.trim().split(spacesRegExp);

elements/Line.js

@@ -23,10 +23,6 @@ export default class extends Shape {
         y2: 0
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         let props = this.props;
         return <RNSVGLine

elements/Path.js

@@ -13,10 +13,6 @@ export default class extends Shape {
         d: PropTypes.string.isRequired
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         let props = this.props;
 

elements/Polygon.js

@@ -14,10 +14,6 @@ export default class extends Component{
         points: ''
     };
 
-    setNativeProps = (...args) => {
-        this.root.getNativeElement().setNativeProps(...args);
-    };
-
     render() {
         let points = this.props.points;
         if (Array.isArray(points)) {

elements/Rect.js

@@ -28,10 +28,6 @@ export default class extends Shape {
         ry: 0
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         let props = this.props;
 

elements/Shape.js

@@ -1,5 +1,6 @@
 import {Component} from 'react';
 import SvgTouchableMixin from '../lib/SvgTouchableMixin';
+import extractProps from '../lib/extract/extractProps';
 import _ from 'lodash';
 
 class Shape extends Component {
@@ -10,6 +11,16 @@ class Shape extends Component {
         });
         this.state = this.touchableGetInitialState();
     }
+
+    setNativeProps = (args) => {
+        var extracted = extractProps(args, this)
+        var toSet = {}
+        for(var key in args) {
+          toSet[key] = extracted[key]
+        }
+        this.root.setNativeProps(toSet);
+    };
+
 }
 
 export default Shape;

elements/TSpan.js

@@ -34,10 +34,6 @@ export default class extends Shape {
         };
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         let props = this.props;
         return <RNSVGTSpan

elements/Text.js

@@ -33,10 +33,6 @@ export default class extends Shape {
         };
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         const props = this.props;
 

elements/Use.js

@@ -16,10 +16,6 @@ export default class extends Shape {
         ...pathProps
     };
 
-    setNativeProps = (...args) => {
-        this.root.setNativeProps(...args);
-    };
-
     render() {
         const {props} = this;
         // match "url(#pattern)"