Simplify and optimize property handling logic

Remove redundant toString calls / type transforms. The view managers handle the different types natively.
2018-10-12 18:52:23 +03:00 · 2018-10-12 18:52:23 +03:00 · 1e25870f5d
--- a/elements/Circle.js
+++ b/elements/Circle.js
@ -12,13 +12,13 @@ export default class extends Shape {
        ...pathProps,
        cx: numberProp.isRequired,
        cy: numberProp.isRequired,
-        r: numberProp.isRequired
+        r: numberProp.isRequired,
    };

    static defaultProps = {
        cx: 0,
        cy: 0,
-        r: 0
+        r: 0,
    };

    setNativeProps = (...args) => {
@ -26,21 +26,22 @@ export default class extends Shape {
    };

    render() {
-        let props = this.props;
+        const { props } = this;
+        const { cx, cy, r } = props;
        return (
            <RNSVGCircle
                ref={ele => {
                    this.root = ele;
                }}
                {...extractProps(props, this)}
-                cx={props.cx.toString()}
-                cy={props.cy.toString()}
-                r={props.r.toString()}
+                cx={cx}
+                cy={cy}
+                r={r}
            />
        );
    }
 }

 const RNSVGCircle = requireNativeComponent("RNSVGCircle", null, {
-    nativeOnly: CircleAttributes
+    nativeOnly: CircleAttributes,
 });
--- a/elements/ClipPath.js
+++ b/elements/ClipPath.js
@ -6,18 +6,15 @@ import { ClipPathAttributes } from "../lib/attributes";
 export default class extends Component {
    static displayName = "ClipPath";
    static propTypes = {
-        id: PropTypes.string.isRequired
+        id: PropTypes.string.isRequired,
    };

    render() {
-        return (
-            <RNSVGClipPath name={this.props.id}>
-                {this.props.children}
-            </RNSVGClipPath>
-        );
+        const { id, children } = this.props;
+        return <RNSVGClipPath name={id}>{children}</RNSVGClipPath>;
    }
 }

 const RNSVGClipPath = requireNativeComponent("RNSVGClipPath", null, {
-    nativeOnly: ClipPathAttributes
+    nativeOnly: ClipPathAttributes,
 });
--- a/elements/Defs.js
+++ b/elements/Defs.js
@ -10,5 +10,5 @@ export default class extends Component {
 }

 const RNSVGDefs = requireNativeComponent("RNSVGDefs", null, {
-    nativeOnly: {}
+    nativeOnly: {},
 });
--- a/elements/Ellipse.js
+++ b/elements/Ellipse.js
@ -13,14 +13,14 @@ export default class extends Shape {
        cx: numberProp.isRequired,
        cy: numberProp.isRequired,
        rx: numberProp.isRequired,
-        ry: numberProp.isRequired
+        ry: numberProp.isRequired,
    };

    static defaultProps = {
        cx: 0,
        cy: 0,
        rx: 0,
-        ry: 0
+        ry: 0,
    };

    setNativeProps = (...args) => {
@ -28,7 +28,8 @@ export default class extends Shape {
    };

    render() {
-        let props = this.props;
+        const { props } = this;
+        const { cx, cy, rx, ry } = props;

        return (
            <RNSVGEllipse
@ -36,15 +37,15 @@ export default class extends Shape {
                    this.root = ele;
                }}
                {...extractProps(props, this)}
-                cx={props.cx.toString()}
-                cy={props.cy.toString()}
-                rx={props.rx.toString()}
-                ry={props.ry.toString()}
+                cx={cx}
+                cy={cy}
+                rx={rx}
+                ry={ry}
            />
        );
    }
 }

 const RNSVGEllipse = requireNativeComponent("RNSVGEllipse", null, {
-    nativeOnly: EllipseAttributes
+    nativeOnly: EllipseAttributes,
 });
--- a/elements/G.js
+++ b/elements/G.js
@ -12,10 +12,10 @@ export default class extends Shape {

    static propTypes = {
        ...pathProps,
-        ...fontProps
+        ...fontProps,
    };

-    setNativeProps = (props) => {
+    setNativeProps = props => {
        const matrix = !props.matrix && extractTransform(props);
        if (matrix) {
            props.matrix = matrix;
@ -24,7 +24,7 @@ export default class extends Shape {
    };

    render() {
-        let { props } = this;
+        const { props } = this;

        return (
            <RNSVGGroup
@ -41,5 +41,5 @@ export default class extends Shape {
 }

 const RNSVGGroup = requireNativeComponent("RNSVGGroup", null, {
-    nativeOnly: GroupAttributes
+    nativeOnly: GroupAttributes,
 });
--- a/elements/Image.js
+++ b/elements/Image.js
@ -31,21 +31,16 @@ export default class extends Shape {
        preserveAspectRatio: "xMidYMid meet",
    };

-    setNativeProps = (props) => {
-        if (props.width) {
-            props.imagewidth = `${props.width}`;
-        }
-        if (props.height) {
-            props.imageheight = `${props.height}`;
-        }
+    setNativeProps = props => {
        this.root.setNativeProps(props);
    };

    render() {
-        let { props } = this;
-        let modes = props.preserveAspectRatio.trim().split(spacesRegExp);
-        let meetOrSlice = meetOrSliceTypes[modes[1]] || 0;
-        let align = alignEnum[modes[0]] || "xMidYMid";
+        const { props } = this;
+        const { preserveAspectRatio, x, y, width, height, href } = props;
+        const modes = preserveAspectRatio.trim().split(spacesRegExp);
+        const meetOrSlice = meetOrSliceTypes[modes[1]] || 0;
+        const align = alignEnum[modes[0]] || "xMidYMid";

        return (
            <RNSVGImage
@ -53,13 +48,13 @@ export default class extends Shape {
                    this.root = ele;
                }}
                {...extractProps({ ...props, x: null, y: null }, this)}
-                x={props.x.toString()}
-                y={props.y.toString()}
-                imagewidth={props.width.toString()}
-                imageheight={props.height.toString()}
+                x={x}
+                y={y}
+                width={width}
+                height={height}
                meetOrSlice={meetOrSlice}
                align={align}
-                src={Image.resolveAssetSource(props.href)}
+                src={Image.resolveAssetSource(href)}
            />
        );
    }
--- a/elements/Line.js
+++ b/elements/Line.js
@ -13,14 +13,14 @@ export default class extends Shape {
        x1: numberProp.isRequired,
        x2: numberProp.isRequired,
        y1: numberProp.isRequired,
-        y2: numberProp.isRequired
+        y2: numberProp.isRequired,
    };

    static defaultProps = {
        x1: 0,
        y1: 0,
        x2: 0,
-        y2: 0
+        y2: 0,
    };

    setNativeProps = (...args) => {
@ -28,22 +28,23 @@ export default class extends Shape {
    };

    render() {
-        let props = this.props;
+        const { props } = this;
+        const { x1, y1, x2, y2 } = props;
        return (
            <RNSVGLine
                ref={ele => {
                    this.root = ele;
                }}
                {...extractProps(props, this)}
-                x1={props.x1.toString()}
-                y1={props.y1.toString()}
-                x2={props.x2.toString()}
-                y2={props.y2.toString()}
+                x1={x1}
+                y1={y1}
+                x2={x2}
+                y2={y2}
            />
        );
    }
 }

 const RNSVGLine = requireNativeComponent("RNSVGLine", null, {
-    nativeOnly: LineAttributes
+    nativeOnly: LineAttributes,
 });
--- a/elements/LinearGradient.js
+++ b/elements/LinearGradient.js
@ -13,25 +13,26 @@ export default class extends Component {
        y1: numberProp.isRequired,
        y2: numberProp.isRequired,
        gradientUnits: PropTypes.oneOf(["objectBoundingBox", "userSpaceOnUse"]),
-        id: PropTypes.string.isRequired
+        id: PropTypes.string.isRequired,
    };

    static defaultProps = {
        x1: "0%",
        y1: "0%",
        x2: "100%",
-        y2: "0%"
+        y2: "0%",
    };

    render() {
-        let { props } = this;
+        const { props } = this;
+        const { x1, y1, x2, y2 } = props;
        return (
            <RNSVGLinearGradient
-                x1={props.x1.toString()}
-                y1={props.y1.toString()}
-                x2={props.x2.toString()}
-                y2={props.y2.toString()}
-                {...extractGradient(this.props)}
+                x1={x1}
+                y1={y1}
+                x2={x2}
+                y2={y2}
+                {...extractGradient(props)}
            />
        );
    }
@ -41,6 +42,6 @@ const RNSVGLinearGradient = requireNativeComponent(
    "RNSVGLinearGradient",
    null,
    {
-        nativeOnly: LinearGradientAttributes
-    }
+        nativeOnly: LinearGradientAttributes,
+    },
 );
--- a/elements/Mask.js
+++ b/elements/Mask.js
@ -22,13 +22,7 @@ export default class extends Component {
        ]),
    };

-    setNativeProps = (props) => {
-        if (props.width) {
-            props.maskwidth = `${props.width}`;
-        }
-        if (props.height) {
-            props.maskheight = `${props.height}`;
-        }
+    setNativeProps = props => {
        this.root.setNativeProps(props);
    };

@ -62,10 +56,10 @@ export default class extends Component {
                    this.root = ele;
                }}
                name={id}
-                x={`${x}`}
-                y={`${y}`}
-                maskwidth={`${width}`}
-                maskheight={`${height}`}
+                x={x}
+                y={y}
+                width={width}
+                height={height}
                matrix={extractedTransform}
                maskTransform={extractedTransform}
                maskUnits={
--- a/elements/Path.js
+++ b/elements/Path.js
@ -11,7 +11,7 @@ export default class extends Shape {

    static propTypes = {
        ...pathProps,
-        d: PropTypes.string.isRequired
+        d: PropTypes.string.isRequired,
    };

    setNativeProps = (...args) => {
@ -19,7 +19,7 @@ export default class extends Shape {
    };

    render() {
-        let props = this.props;
+        const { props } = this;

        return (
            <RNSVGPath
@ -34,5 +34,5 @@ export default class extends Shape {
 }

 const RNSVGPath = requireNativeComponent("RNSVGPath", null, {
-    nativeOnly: PathAttributes
+    nativeOnly: PathAttributes,
 });
--- a/elements/Pattern.js
+++ b/elements/Pattern.js
@ -25,13 +25,7 @@ export default class extends Component {
        preserveAspectRatio: PropTypes.string,
    };

-    setNativeProps = (props) => {
-        if (props.width) {
-            props.patternwidth = `${props.width}`;
-        }
-        if (props.height) {
-            props.patternheight = `${props.height}`;
-        }
+    setNativeProps = props => {
        this.root.setNativeProps(props);
    };

@ -67,10 +61,10 @@ export default class extends Component {
                    this.root = ele;
                }}
                name={id}
-                x={`${x}`}
-                y={`${y}`}
-                patternwidth={`${width}`}
-                patternheight={`${height}`}
+                x={x}
+                y={y}
+                width={width}
+                height={height}
                matrix={extractedTransform}
                patternTransform={extractedTransform}
                patternUnits={PATTERN_UNITS[patternUnits] || 0}
--- a/elements/Polygon.js
+++ b/elements/Polygon.js
@ -10,27 +10,28 @@ export default class extends Shape {
    static propTypes = {
        ...pathProps,
        points: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
-            .isRequired
+            .isRequired,
    };

    static defaultProps = {
-        points: ""
+        points: "",
    };

-    setNativeProps = (...args) => {
-        //noinspection JSUnresolvedFunction
-        let points = [...args][0].points;
+    setNativeProps = props => {
+        let { points } = props;
        if (points) {
            if (Array.isArray(points)) {
                points = points.join(",");
            }
-            [...args][0].d = `M${extractPolyPoints(points)}`;
+            props.d = `M${extractPolyPoints(points)}`;
        }
-        this.root.setNativeProps(...args);
+        this.root.setNativeProps(props);
    };

    render() {
-        let points = this.props.points;
+        const { props } = this;
+        let { points } = props;
+
        if (Array.isArray(points)) {
            points = points.join(",");
        }
@ -40,7 +41,7 @@ export default class extends Shape {
                ref={ele => {
                    this.root = ele;
                }}
-                {...this.props}
+                {...props}
                d={`M${extractPolyPoints(points)}z`}
            />
        );
--- a/elements/Polyline.js
+++ b/elements/Polyline.js
@ -10,27 +10,28 @@ export default class extends Shape {
    static propTypes = {
        ...pathProps,
        points: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
-            .isRequired
+            .isRequired,
    };

    static defaultProps = {
-        points: ""
+        points: "",
    };

-    setNativeProps = (...args) => {
-        //noinspection JSUnresolvedFunction
-        let points = [...args][0].points;
+    setNativeProps = props => {
+        let { points } = props;
        if (points) {
            if (Array.isArray(points)) {
                points = points.join(",");
            }
-            [...args][0].d = `M${extractPolyPoints(points)}`;
+            props.d = `M${extractPolyPoints(points)}`;
        }
-        this.root.setNativeProps(...args);
+        this.root.setNativeProps(props);
    };

    render() {
-        let points = this.props.points;
+        const { props } = this;
+        let { points } = props;
+
        if (Array.isArray(points)) {
            points = points.join(",");
        }
--- a/elements/RadialGradient.js
+++ b/elements/RadialGradient.js
@ -16,7 +16,7 @@ export default class extends Component {
        cy: numberProp.isRequired,
        r: numberProp,
        gradientUnits: PropTypes.oneOf(["objectBoundingBox", "userSpaceOnUse"]),
-        id: PropTypes.string.isRequired
+        id: PropTypes.string.isRequired,
    };

    static defaultProps = {
@ -24,20 +24,21 @@ export default class extends Component {
        fy: "50%",
        cx: "50%",
        cy: "50%",
-        r: "50%"
+        r: "50%",
    };

    render() {
-        let { props } = this;
+        const { props } = this;
+        const { fx, fy, rx, ry, r, cx, cy } = props;
        return (
            <RNSVGRadialGradient
-                fx={props.fx.toString()}
-                fy={props.fy.toString()}
-                rx={(props.rx || props.r).toString()}
-                ry={(props.ry || props.r).toString()}
-                cx={props.cx.toString()}
-                cy={props.cy.toString()}
-                {...extractGradient(this.props)}
+                fx={fx}
+                fy={fy}
+                rx={rx || r}
+                ry={ry || r}
+                cx={cx}
+                cy={cy}
+                {...extractGradient(props)}
            />
        );
    }
@ -47,6 +48,6 @@ const RNSVGRadialGradient = requireNativeComponent(
    "RNSVGRadialGradient",
    null,
    {
-        nativeOnly: RadialGradientAttributes
-    }
+        nativeOnly: RadialGradientAttributes,
+    },
 );
--- a/elements/Rect.js
+++ b/elements/Rect.js
@ -16,7 +16,7 @@ export default class extends Shape {
        width: numberProp.isRequired,
        height: numberProp.isRequired,
        rx: numberProp,
-        ry: numberProp
+        ry: numberProp,
    };

    static defaultProps = {
@ -25,22 +25,16 @@ export default class extends Shape {
        width: 0,
        height: 0,
        rx: 0,
-        ry: 0
+        ry: 0,
    };

-    setNativeProps = (props) => {
-        if (props.width) {
-            props.rectwidth = `${props.width}`;
-        }
-        if (props.height) {
-            props.rectheight = `${props.height}`;
-        }
+    setNativeProps = props => {
        this.root.setNativeProps(props);
    };

    render() {
-        let props = this.props;
-
+        const { props } = this;
+        const { x, y, width, height, rx, ry } = props;
        return (
            <RNSVGRect
                ref={ele => {
@ -50,21 +44,21 @@ export default class extends Shape {
                    {
                        ...props,
                        x: null,
-                        y: null
+                        y: null,
                    },
-                    this
+                    this,
                )}
-                x={props.x.toString()}
-                y={props.y.toString()}
-                rectwidth={props.width.toString()}
-                rectheight={props.height.toString()}
-                rx={props.rx.toString()}
-                ry={props.ry.toString()}
+                x={x}
+                y={y}
+                width={width}
+                height={height}
+                rx={rx}
+                ry={ry}
            />
        );
    }
 }

 const RNSVGRect = requireNativeComponent("RNSVGRect", null, {
-    nativeOnly: RectAttributes
+    nativeOnly: RectAttributes,
 });
--- a/elements/Stop.js
+++ b/elements/Stop.js
@ -6,12 +6,12 @@ export default class extends Component {
    static displayName = "Stop";
    static propTypes = {
        stopColor: PropTypes.string,
-        stopOpacity: numberProp
+        stopOpacity: numberProp,
    };

    static defaultProps = {
        stopColor: "#000",
-        stopOpacity: 1
+        stopOpacity: 1,
    };

    render() {
--- a/elements/Svg.js
+++ b/elements/Svg.js
@ -6,7 +6,7 @@ import {
    requireNativeComponent,
    StyleSheet,
    findNodeHandle,
-    NativeModules
+    NativeModules,
 } from "react-native";
 import extractResponder from "../lib/extract/extractResponder";
 import extractViewBox from "../lib/extract/extractViewBox";
@ -24,8 +24,8 @@ let id = 0;
 const styles = StyleSheet.create({
    svg: {
        backgroundColor: "transparent",
-        borderWidth: 0
-    }
+        borderWidth: 0,
+    },
 });

 class Svg extends Shape {
@ -39,11 +39,14 @@ class Svg extends Shape {
        // more detail https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute
        viewBox: PropTypes.string,
        preserveAspectRatio: PropTypes.string,
-        style: PropTypes.shape({ ...ViewPropTypes.style, color: PropTypes.string })
+        style: PropTypes.shape({
+            ...ViewPropTypes.style,
+            color: PropTypes.string,
+        }),
    };

    static defaultProps = {
-        preserveAspectRatio: "xMidYMid meet"
+        preserveAspectRatio: "xMidYMid meet",
    };

    constructor() {
@ -62,7 +65,7 @@ class Svg extends Shape {
        this.root.measureLayout(...args);
    };

-    setNativeProps = (props) => {
+    setNativeProps = props => {
        if (props.width) {
            props.bbWidth = `${props.width}`;
        }
@ -87,18 +90,14 @@ class Svg extends Shape {
            ...props
        } = this.props;
        const stylesAndProps = { ...style, ...props };
-        const {
-            color,
-            width,
-            height,
-        } = stylesAndProps;
+        const { color, width, height } = stylesAndProps;

        let dimensions;
        if (width && height) {
            dimensions = {
                width: width[width.length - 1] === "%" ? width : +width,
                height: height[height.length - 1] === "%" ? height : +height,
-                flex: 0
+                flex: 0,
            };
        }

@ -120,12 +119,14 @@ class Svg extends Shape {
                    styles.svg,
                    style,
                    !isNaN(+opacity) && {
-                        opacity: +opacity
+                        opacity: +opacity,
                    },
-                    dimensions
+                    dimensions,
                ]}
            >
-                <G style={style} {...props}>{children}</G>
+                <G style={style} {...props}>
+                    {children}
+                </G>
            </NativeSvgView>
        );
    }
@ -136,8 +137,10 @@ const NativeSvgView = requireNativeComponent("RNSVGSvgView", null, {
        ...ViewBoxAttributes,
        width: true,
        height: true,
-        tintColor: true
-    }
+        bbwidth: true,
+        bbheight: true,
+        tintColor: true,
+    },
 });

 export default Svg;
--- a/elements/Symbol.js
+++ b/elements/Symbol.js
@ -9,19 +9,20 @@ export default class extends Component {
    static propTypes = {
        id: PropTypes.string.isRequired,
        viewBox: PropTypes.string,
-        preserveAspectRatio: PropTypes.string
+        preserveAspectRatio: PropTypes.string,
    };
    render() {
-        let { props } = this;
+        const { props } = this;
+        const { id, children } = props;

        return (
-            <RNSVGSymbol name={props.id} {...extractViewBox(props)}>
-                {props.children}
+            <RNSVGSymbol name={id} {...extractViewBox(props)}>
+                {children}
            </RNSVGSymbol>
        );
    }
 }

 const RNSVGSymbol = requireNativeComponent("RNSVGSymbol", null, {
-    nativeOnly: SymbolAttributes
+    nativeOnly: SymbolAttributes,
 });
--- a/elements/TSpan.js
+++ b/elements/TSpan.js
@ -1,6 +1,5 @@
 import React from "react";
 import _ from "lodash";
-import PropTypes from "prop-types";
 import { requireNativeComponent } from "react-native";
 import extractText from "../lib/extract/extractText";
 import { textProps } from "../lib/props";
@ -15,20 +14,20 @@ export default class extends Shape {

    static propTypes = textProps;

-    setNativeProps = (props) => {
+    setNativeProps = props => {
        const matrix = !props.matrix && extractTransform(props);
        if (matrix) {
            props.matrix = matrix;
        }
-        const textProps = _.pickBy(extractText(props, true), p => !_.isNil(p));
+        const text = _.pickBy(extractText(props, true), p => !_.isNil(p));
        this.root.setNativeProps({
            ...props,
-            ...textProps
+            ...text,
        });
    };

    render() {
-        let props = this.props;
+        const props = this.props;
        return (
            <RNSVGTSpan
                ref={ele => {
@ -38,9 +37,9 @@ export default class extends Shape {
                    {
                        ...props,
                        x: null,
-                        y: null
+                        y: null,
                    },
-                    this
+                    this,
                )}
                {...extractText(props)}
            />
@ -49,5 +48,5 @@ export default class extends Shape {
 }

 const RNSVGTSpan = requireNativeComponent("RNSVGTSpan", null, {
-    nativeOnly: TSpanAttibutes
+    nativeOnly: TSpanAttibutes,
 });
--- a/elements/Text.js
+++ b/elements/Text.js
@ -1,6 +1,5 @@
 import React from "react";
 import _ from "lodash";
-import PropTypes from "prop-types";
 import { requireNativeComponent } from "react-native";
 import extractText from "../lib/extract/extractText";
 import { textProps } from "../lib/props";
@ -14,15 +13,15 @@ export default class extends Shape {

    static propTypes = textProps;

-    setNativeProps = (props) => {
+    setNativeProps = props => {
        const matrix = !props.matrix && extractTransform(props);
        if (matrix) {
            props.matrix = matrix;
        }
-        const textProps = _.pickBy(extractText(props, true), p => !_.isNil(p));
+        const text = _.pickBy(extractText(props, true), p => !_.isNil(p));
        this.root.setNativeProps({
            ...props,
-            ...textProps
+            ...text,
        });
    };

@ -38,9 +37,9 @@ export default class extends Shape {
                    {
                        ...props,
                        x: null,
-                        y: null
+                        y: null,
                    },
-                    this
+                    this,
                )}
                {...extractText(props, true)}
            />
@ -49,5 +48,5 @@ export default class extends Shape {
 }

 const RNSVGText = requireNativeComponent("RNSVGText", null, {
-    nativeOnly: TextAttributes
+    nativeOnly: TextAttributes,
 });
--- a/elements/TextPath.js
+++ b/elements/TextPath.js
@ -16,7 +16,7 @@ export default class extends Shape {
    static propTypes = textPathProps;

    render() {
-        let {
+        const {
            children,
            href,
            startOffset,
@ -27,51 +27,47 @@ export default class extends Shape {
            midLine,
            ...props
        } = this.props;
-        if (href) {
-            let matched = href.match(idExpReg);
-
-            if (matched) {
-                href = matched[1];
-                startOffset = `${startOffset || 0}`;
-                return (
-                    <RNSVGTextPath
-                        {...{
-                            href,
-                            startOffset,
-                            method,
-                            spacing,
-                            side,
-                            alignmentBaseline,
-                            midLine
-                        }}
-                        {...extractProps(
-                            {
-                                ...props,
-                                x: null,
-                                y: null
-                            },
-                            this
-                        )}
-                        {...extractText(
-                            {
-                                children
-                            },
-                            true
-                        )}
-                    />
-                );
-            }
+        const matched = href && href.match(idExpReg);
+        const match = matched && matched[1];
+        if (href && match) {
+            return (
+                <RNSVGTextPath
+                    {...{
+                        href: match,
+                        startOffset: startOffset || 0,
+                        method,
+                        spacing,
+                        side,
+                        alignmentBaseline,
+                        midLine,
+                    }}
+                    {...extractProps(
+                        {
+                            ...props,
+                            x: null,
+                            y: null,
+                        },
+                        this,
+                    )}
+                    {...extractText(
+                        {
+                            children,
+                        },
+                        true,
+                    )}
+                />
+            );
        }

        console.warn(
            'Invalid `href` prop for `TextPath` element, expected a href like `"#id"`, but got: "' +
-                props.href +
-                '"'
+                href +
+                '"',
        );
        return <TSpan>{children}</TSpan>;
    }
 }

 const RNSVGTextPath = requireNativeComponent("RNSVGTextPath", null, {
-    nativeOnly: TextPathAttributes
+    nativeOnly: TextPathAttributes,
 });
--- a/elements/Use.js
+++ b/elements/Use.js
@ -14,40 +14,31 @@ export default class extends Shape {
        href: PropTypes.string.isRequired,
        width: numberProp, // Just for reusing `Symbol`
        height: numberProp, //  Just for reusing `Symbol`
-        ...pathProps
+        ...pathProps,
    };

    static defaultProps = {
        width: 0,
-        height: 0
+        height: 0,
    };

-    setNativeProps = (props) => {
-        if (props.width) {
-            props.usewidth = `${props.width}`;
-        }
-        if (props.height) {
-            props.useheight = `${props.height}`;
-        }
+    setNativeProps = props => {
        this.root.setNativeProps(props);
    };

    render() {
        const { props } = this;
-        const { children, width, height } = props;
+        const { children, width, height, href } = props;
+
        // match "url(#pattern)"
-        const matched = props.href.match(idExpReg);
-        let href;
+        const matched = href.match(idExpReg);
+        const match = matched && matched[1];

-        if (matched) {
-            href = matched[1];
-        }
-
-        if (!href) {
+        if (!match) {
            console.warn(
                'Invalid `href` prop for `Use` element, expected a href like `"#id"`, but got: "' +
-                    props.href +
-                    '"'
+                    href +
+                    '"',
            );
        }

@ -57,9 +48,9 @@ export default class extends Shape {
                    this.root = ele;
                }}
                {...extractProps(props, this)}
-                href={href}
-                usewidth={width !== undefined ? width.toString() : ""}
-                useheight={height !== undefined ? height.toString() : ""}
+                href={match}
+                width={width}
+                height={height}
            >
                {children}
            </RNSVGUse>
@ -68,5 +59,5 @@ export default class extends Shape {
 }

 const RNSVGUse = requireNativeComponent("RNSVGUse", null, {
-    nativeOnly: UseAttributes
+    nativeOnly: UseAttributes,
 });
--- a/lib/extract/extractClipPath.js
+++ b/lib/extract/extractClipPath.js
@ -2,7 +2,7 @@ import clipReg from "./patternReg";

 const clipRules = {
    evenodd: 0,
-    nonzero: 1
+    nonzero: 1,
 };

 export default function(props) {
@ -20,7 +20,7 @@ export default function(props) {
            console.warn(
                'Invalid `clipPath` prop, expected a clipPath like `"#id"`, but got: "' +
                    clipPath +
-                    '"'
+                    '"',
            );
        }
    }
--- a/lib/extract/extractFill.js
+++ b/lib/extract/extractFill.js
@ -4,7 +4,7 @@ import { fillProps } from "../props";

 const fillRules = {
    evenodd: 0,
-    nonzero: 1
+    nonzero: 1,
 };

 const fillKeys = Object.keys(fillProps);
@ -20,6 +20,6 @@ export default function(props, styleProperties) {
        // default fill is black
        fill: extractBrush(props.fill || "#000"),
        fillOpacity: extractOpacity(props.fillOpacity),
-        fillRule: fillRules[props.fillRule] === 0 ? 0 : 1
+        fillRule: fillRules[props.fillRule] === 0 ? 0 : 1,
    };
 }
--- a/lib/extract/extractGradient.js
+++ b/lib/extract/extractGradient.js
@ -21,7 +21,7 @@ export default function(props) {
            // add stop
            //noinspection JSUnresolvedFunction
            stops[offset] = Color(child.props.stopColor).alpha(
-                extractOpacity(child.props.stopOpacity)
+                extractOpacity(child.props.stopOpacity),
            );
        }
    });
@ -30,7 +30,7 @@ export default function(props) {
        _.map(stops, (stop, offset) => {
            return { stop, offset };
        }),
-        "offset"
+        "offset",
    );

    const gradient = [];
@ -58,6 +58,6 @@ export default function(props) {
        gradient,
        name: props.id,
        gradientTransform,
-        gradientUnits: PATTERN_UNITS[props.gradientUnits] || 0
+        gradientUnits: PATTERN_UNITS[props.gradientUnits] || 0,
    };
 }
--- a/lib/extract/extractProps.js
+++ b/lib/extract/extractProps.js
@ -34,7 +34,7 @@ export default function(prop, ref) {
            console.warn(
                'Invalid `mask` prop, expected a mask like `"#id"`, but got: "' +
                    mask +
-                    '"'
+                    '"',
            );
        }
    }
--- a/lib/extract/extractResponder.js
+++ b/lib/extract/extractResponder.js
@ -29,7 +29,7 @@ export default function(props, ref) {
            onResponderGrant: ref.touchableHandleResponderGrant,
            onResponderMove: ref.touchableHandleResponderMove,
            onResponderRelease: ref.touchableHandleResponderRelease,
-            onResponderTerminate: ref.touchableHandleResponderTerminate
+            onResponderTerminate: ref.touchableHandleResponderTerminate,
        });

        return false;
--- a/lib/extract/extractStroke.js
+++ b/lib/extract/extractStroke.js
@ -6,13 +6,13 @@ import extractLengthList from "./extractLengthList";
 const caps = {
    butt: 0,
    square: 2,
-    round: 1
+    round: 1,
 };

 const joins = {
    miter: 0,
    bevel: 2,
-    round: 1
+    round: 1,
 };

 const strokeKeys = Object.keys(strokeProps);
@ -52,6 +52,6 @@ export default function(props, styleProperties) {
        strokeDasharray: strokeDasharray,
        strokeWidth: strokeWidth,
        strokeDashoffset: strokeDasharray ? +props.strokeDashoffset || 0 : null,
-        strokeMiterlimit: parseFloat(props.strokeMiterlimit) || 4
+        strokeMiterlimit: parseFloat(props.strokeMiterlimit) || 4,
    };
 }
--- a/lib/extract/extractText.js
+++ b/lib/extract/extractText.js
@ -41,7 +41,7 @@ function parseFontString(font) {
        fontSize,
        fontFamily,
        fontWeight,
-        fontStyle
+        fontStyle,
    };
    return cachedFontObjectsFromString[font];
 }
@ -60,7 +60,7 @@ export function extractFont(prop) {
        wordSpacing,
        kerning,
        fontVariantLigatures,
-        fontFeatureSettings
+        fontFeatureSettings,
    } = props;
    let { fontSize, fontFamily, font } = props;

@ -82,9 +82,9 @@ export function extractFont(prop) {
            wordSpacing,
            kerning,
            fontVariantLigatures,
-            fontFeatureSettings
+            fontFeatureSettings,
        },
-        p => !_.isNil(p)
+        p => !_.isNil(p),
    );

    if (typeof font === "string") {
@ -137,6 +137,6 @@ export default function(props, container) {
        y: extractLengthList(y),
        dx: extractLengthList(dx),
        dy: extractLengthList(dy),
-        rotate: extractLengthList(rotate)
+        rotate: extractLengthList(rotate),
    };
 }
--- a/lib/extract/extractTransform.js
+++ b/lib/extract/extractTransform.js
@ -189,7 +189,7 @@ function appendTransform(transform) {
                transform.skewX,
                transform.skewY,
                transform.originX,
-                transform.originY
+                transform.originY,
            );
        }
    }
@ -231,19 +231,19 @@ export function props2transform(props) {
    let [originX, originY] = universal2axis(
        props.origin,
        props.originX,
-        props.originY
+        props.originY,
    );
    let [scaleX, scaleY] = universal2axis(
        props.scale,
        props.scaleX,
        props.scaleY,
-        1
+        1,
    );
    let [skewX, skewY] = universal2axis(props.skew, props.skewX, props.skewY);
    let [translateX, translateY] = universal2axis(
        props.translate,
        _.isNil(props.translateX) ? props.x || 0 : props.translateX,
-        _.isNil(props.translateY) ? props.y || 0 : props.translateY
+        _.isNil(props.translateY) ? props.y || 0 : props.translateY,
    );

    return {
@ -255,13 +255,13 @@ export function props2transform(props) {
        skewX: skewX,
        skewY: skewY,
        x: translateX,
-        y: translateY
+        y: translateY,
    };
 }

 export default function(props) {
    return transformToMatrix(
        props2transform(props),
-        props.transform ? props2transform(props.transform) : null
+        props.transform ? props2transform(props.transform) : null,
    );
 }
--- a/lib/extract/extractViewBox.js
+++ b/lib/extract/extractViewBox.js
@ -1,7 +1,7 @@
 const meetOrSliceTypes = {
    meet: 0,
    slice: 1,
-    none: 2
+    none: 2,
 };

 const alignEnum = [
@ -14,7 +14,7 @@ const alignEnum = [
    "xMinYMax",
    "xMidYMax",
    "xMaxYMax",
-    "none"
+    "none",
 ].reduce((prev, name) => {
    prev[name] = name;
    return prev;
@ -49,7 +49,7 @@ export default function(props) {
        vbWidth: +params[2],
        vbHeight: +params[3],
        align,
-        meetOrSlice
+        meetOrSlice,
    };
 }