chore: refactor props and styles extraction

src/elements/Circle.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { requireNativeComponent } from 'react-native';
-import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
+import { extract } from '../lib/extract/extractProps';
 import { NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
 
@@ -23,7 +23,7 @@ export default class Circle extends Shape<{
     return (
       <RNSVGCircle
         ref={this.refMethod}
-        {...extractProps(propsAndStyles(props), this)}
+        {...extract(this, props)}
         cx={cx}
         cy={cy}
         r={r}

src/elements/ClipPath.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { requireNativeComponent } from 'react-native';
-import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
+import { extract } from '../lib/extract/extractProps';
 import Shape from './Shape';
 
 export default class ClipPath extends Shape<{}> {
@@ -9,10 +9,7 @@ export default class ClipPath extends Shape<{}> {
   render() {
     const { props } = this;
     return (
-      <RNSVGClipPath
+      <RNSVGClipPath ref={this.refMethod} {...extract(this, props)}>
-        ref={this.refMethod}
-        {...extractProps(propsAndStyles(props), this)}
-      >
         {props.children}
       </RNSVGClipPath>
     );

src/elements/Ellipse.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { requireNativeComponent } from 'react-native';
-import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
+import { extract } from '../lib/extract/extractProps';
 import { NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
 
@@ -25,7 +25,7 @@ export default class Ellipse extends Shape<{
     return (
       <RNSVGEllipse
         ref={this.refMethod}
-        {...extractProps(propsAndStyles(props), this)}
+        {...extract(this, props)}
         cx={cx}
         cy={cy}
         rx={rx}

src/elements/Image.tsx

@@ -5,7 +5,7 @@ import {
   requireNativeComponent,
 } from 'react-native';
 import { meetOrSliceTypes, alignEnum } from '../lib/extract/extractViewBox';
-import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
+import { withoutXY } from '../lib/extract/extractProps';
 import { NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
 
@@ -50,7 +50,7 @@ export default class SvgImage extends Shape<{
     return (
       <RNSVGImage
         ref={this.refMethod}
-        {...extractProps({ ...propsAndStyles(props), x: null, y: null }, this)}
+        {...withoutXY(this, props)}
         x={x}
         y={y}
         width={width}

src/elements/Line.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { requireNativeComponent } from 'react-native';
-import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
+import { extract } from '../lib/extract/extractProps';
 import { NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
 
@@ -25,7 +25,7 @@ export default class Line extends Shape<{
     return (
       <RNSVGLine
         ref={this.refMethod}
-        {...extractProps(propsAndStyles(props), this)}
+        {...extract(this, props)}
         x1={x1}
         y1={y1}
         x2={x2}

src/elements/Mask.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { requireNativeComponent } from 'react-native';
 import extractTransform from '../lib/extract/extractTransform';
-import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
+import { withoutXY } from '../lib/extract/extractProps';
 import { NumberProp, TransformProps } from '../lib/extract/types';
 import units from '../lib/units';
 import Shape from './Shape';
@@ -41,7 +41,7 @@ export default class Mask extends Shape<{
     return (
       <RNSVGMask
         ref={this.refMethod}
-        {...extractProps({ ...propsAndStyles(props), x: null, y: null }, this)}
+        {...withoutXY(this, props)}
         x={x}
         y={y}
         width={width}

src/elements/Path.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { requireNativeComponent } from 'react-native';
-import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
+import { extract } from '../lib/extract/extractProps';
 import Shape from './Shape';
 
 export default class Path extends Shape<{
@@ -11,11 +11,7 @@ export default class Path extends Shape<{
   render() {
     const { props } = this;
     return (
-      <RNSVGPath
+      <RNSVGPath ref={this.refMethod} {...extract(this, props)} d={props.d} />
-        ref={this.refMethod}
-        {...extractProps(propsAndStyles(props), this)}
-        d={props.d}
-      />
     );
   }
 }

src/elements/Rect.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { requireNativeComponent } from 'react-native';
-import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
+import { withoutXY } from '../lib/extract/extractProps';
 import { NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
 
@@ -27,14 +27,7 @@ export default class Rect extends Shape<{
     return (
       <RNSVGRect
         ref={this.refMethod}
-        {...extractProps(
+        {...withoutXY(this, props)}
-          {
-            ...propsAndStyles(props),
-            x: null,
-            y: null,
-          },
-          this,
-        )}
         x={x}
         y={y}
         width={width}

src/elements/TextPath.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { requireNativeComponent } from 'react-native';
 import extractTransform from '../lib/extract/extractTransform';
-import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
+import { withoutXY } from '../lib/extract/extractProps';
 import { NumberProp, TransformProps } from '../lib/extract/types';
 import extractText from '../lib/extract/extractText';
 import { idPattern, pickNotNil } from '../lib/util';
@@ -51,14 +51,7 @@ export default class TextPath extends Shape<{
     const matched = href && href.match(idPattern);
     const match = matched && matched[1];
     if (match) {
-      const props = extractProps(
+      const props = withoutXY(this, prop);
-        {
-          ...propsAndStyles(prop),
-          x: null,
-          y: null,
-        },
-        this,
-      );
       Object.assign(
         props,
         extractText(

src/elements/Use.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { requireNativeComponent } from 'react-native';
-import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
+import { withoutXY } from '../lib/extract/extractProps';
 import { NumberProp } from '../lib/extract/types';
 import { idPattern } from '../lib/util';
 import Shape from './Shape';
@@ -48,7 +48,7 @@ export default class Use extends Shape<{
     return (
       <RNSVGUse
         ref={this.refMethod}
-        {...extractProps({ ...propsAndStyles(props), x: null, y: null }, this)}
+        {...withoutXY(this, props)}
         href={match}
         x={x}
         y={y}

src/lib/extract/extractProps.ts

@@ -149,3 +149,14 @@ export default function extractProps(
 
   return extracted;
 }
+
+export function extract(instance: Object, props: Object & { style?: [] | {} }) {
+  return extractProps(propsAndStyles(props), instance);
+}
+
+export function withoutXY(
+  instance: Object,
+  props: Object & { style?: [] | {} },
+) {
+  return extractProps({ ...propsAndStyles(props), x: null, y: null }, instance);
+}