perf: optimize svg root prop handling, simplify element development

This change allows modifying the element code without causing it to load
the native components more than once, making live-reload usable.

__tests__/__snapshots__/css.test.tsx.snap

@@ -98,10 +98,6 @@ exports[`supports CSS in style element 1`] = `
         "backgroundColor": "transparent",
         "borderWidth": 0,
       },
-      undefined,
-      Object {
-        "opacity": 1,
-      },
       Object {
         "flex": 0,
         "height": "100%",

src/ReactNativeSVG.ts

@@ -1,28 +1,28 @@
 import Shape from './elements/Shape';
-import Rect, { RNSVGRect } from './elements/Rect';
-import Circle, { RNSVGCircle } from './elements/Circle';
-import Ellipse, { RNSVGEllipse } from './elements/Ellipse';
+import Rect from './elements/Rect';
+import Circle from './elements/Circle';
+import Ellipse from './elements/Ellipse';
 import Polygon from './elements/Polygon';
 import Polyline from './elements/Polyline';
-import Line, { RNSVGLine } from './elements/Line';
-import Svg, { RNSVGSvg } from './elements/Svg';
-import Path, { RNSVGPath } from './elements/Path';
-import G, { RNSVGGroup } from './elements/G';
-import Text, { RNSVGText } from './elements/Text';
-import TSpan, { RNSVGTSpan } from './elements/TSpan';
-import TextPath, { RNSVGTextPath } from './elements/TextPath';
-import Use, { RNSVGUse } from './elements/Use';
-import Image, { RNSVGImage } from './elements/Image';
-import Symbol, { RNSVGSymbol } from './elements/Symbol';
-import Defs, { RNSVGDefs } from './elements/Defs';
-import LinearGradient, { RNSVGLinearGradient } from './elements/LinearGradient';
-import RadialGradient, { RNSVGRadialGradient } from './elements/RadialGradient';
+import Line from './elements/Line';
+import Svg from './elements/Svg';
+import Path from './elements/Path';
+import G from './elements/G';
+import Text from './elements/Text';
+import TSpan from './elements/TSpan';
+import TextPath from './elements/TextPath';
+import Use from './elements/Use';
+import Image from './elements/Image';
+import Symbol from './elements/Symbol';
+import Defs from './elements/Defs';
+import LinearGradient from './elements/LinearGradient';
+import RadialGradient from './elements/RadialGradient';
 import Stop from './elements/Stop';
-import ClipPath, { RNSVGClipPath } from './elements/ClipPath';
-import Pattern, { RNSVGPattern } from './elements/Pattern';
-import Mask, { RNSVGMask } from './elements/Mask';
-import Marker, { RNSVGMarker } from './elements/Marker';
-import ForeignObject, { RNSVGForeignObject } from './elements/ForeignObject';
+import ClipPath from './elements/ClipPath';
+import Pattern from './elements/Pattern';
+import Mask from './elements/Mask';
+import Marker from './elements/Marker';
+import ForeignObject from './elements/ForeignObject';
 import { parse, SvgAst, SvgFromUri, SvgFromXml, SvgUri, SvgXml } from './xml';
 import {
   SvgCss,
@@ -31,6 +31,29 @@ import {
   SvgWithCssUri,
   inlineStyles,
 } from './css';
+import {
+  RNSVGCircle,
+  RNSVGClipPath,
+  RNSVGDefs,
+  RNSVGEllipse,
+  RNSVGForeignObject,
+  RNSVGGroup,
+  RNSVGImage,
+  RNSVGLine,
+  RNSVGLinearGradient,
+  RNSVGMarker,
+  RNSVGMask,
+  RNSVGPath,
+  RNSVGPattern,
+  RNSVGRadialGradient,
+  RNSVGRect,
+  RNSVGSvg,
+  RNSVGSymbol,
+  RNSVGText,
+  RNSVGTextPath,
+  RNSVGTSpan,
+  RNSVGUse,
+} from './elements/NativeComponents';
 
 export {
   Svg,

src/elements/Circle.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
 import { extract } from '../lib/extract/extractProps';
 import { NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
+import { RNSVGCircle } from './NativeComponents';
 
 export default class Circle extends Shape<{
   cx?: NumberProp;
@@ -31,5 +31,3 @@ export default class Circle extends Shape<{
     );
   }
 }
-
-export const RNSVGCircle = requireNativeComponent('RNSVGCircle');

src/elements/ClipPath.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
 import { extract } from '../lib/extract/extractProps';
 import Shape from './Shape';
+import { RNSVGClipPath } from './NativeComponents';
 
 export default class ClipPath extends Shape<{}> {
   static displayName = 'ClipPath';
@@ -15,5 +15,3 @@ export default class ClipPath extends Shape<{}> {
     );
   }
 }
-
-export const RNSVGClipPath = requireNativeComponent('RNSVGClipPath');

src/elements/Defs.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { requireNativeComponent } from 'react-native';
+import { RNSVGDefs } from './NativeComponents';
 
 export default class Defs extends Component {
   static displayName = 'Defs';
@@ -8,5 +8,3 @@ export default class Defs extends Component {
     return <RNSVGDefs>{this.props.children}</RNSVGDefs>;
   }
 }
-
-export const RNSVGDefs = requireNativeComponent('RNSVGDefs');

src/elements/Ellipse.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
 import { extract } from '../lib/extract/extractProps';
 import { NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
+import { RNSVGEllipse } from './NativeComponents';
 
 export default class Ellipse extends Shape<{
   cx?: NumberProp;
@@ -34,5 +34,3 @@ export default class Ellipse extends Shape<{
     );
   }
 }
-
-export const RNSVGEllipse = requireNativeComponent('RNSVGEllipse');

src/elements/ForeignObject.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
 import { withoutXY } from '../lib/extract/extractProps';
 import { NumberProp } from '../lib/extract/types';
 import G from './G';
+import { RNSVGForeignObject } from './NativeComponents';
 
 export default class ForeignObject extends G<{
   x?: NumberProp;
@@ -36,5 +36,3 @@ export default class ForeignObject extends G<{
     );
   }
 }
-
-export const RNSVGForeignObject = requireNativeComponent('RNSVGForeignObject');

src/elements/G.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
 import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
 import { extractFont } from '../lib/extract/extractText';
 import extractTransform from '../lib/extract/extractTransform';
 import { TransformProps } from '../lib/extract/types';
 import Shape from './Shape';
+import { RNSVGGroup } from './NativeComponents';
 
 export default class G<P> extends Shape<P> {
   static displayName = 'G';
@@ -43,5 +43,3 @@ const hasProps = (obj: {}) => {
   }
   return false;
 };
-
-export const RNSVGGroup = requireNativeComponent('RNSVGGroup');

src/elements/Image.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
-import {
-  Image,
-  ImageSourcePropType,
-  requireNativeComponent,
-} from 'react-native';
-import { meetOrSliceTypes, alignEnum } from '../lib/extract/extractViewBox';
+import { Image, ImageSourcePropType } from 'react-native';
+import { alignEnum, meetOrSliceTypes } from '../lib/extract/extractViewBox';
 import { withoutXY } from '../lib/extract/extractProps';
 import { NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
+import { RNSVGImage } from './NativeComponents';
 
 const spacesRegExp = /\s+/;
 
@@ -68,5 +65,3 @@ export default class SvgImage extends Shape<{
     );
   }
 }
-
-export const RNSVGImage = requireNativeComponent('RNSVGImage');

src/elements/Line.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
 import { extract } from '../lib/extract/extractProps';
 import { NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
+import { RNSVGLine } from './NativeComponents';
 
 export default class Line extends Shape<{
   x1?: NumberProp;
@@ -34,5 +34,3 @@ export default class Line extends Shape<{
     );
   }
 }
-
-export const RNSVGLine = requireNativeComponent('RNSVGLine');

src/elements/LinearGradient.tsx

@@ -1,8 +1,8 @@
 import React, { ReactElement } from 'react';
-import { requireNativeComponent } from 'react-native';
 import extractGradient from '../lib/extract/extractGradient';
 import { NumberProp, TransformProps } from '../lib/extract/types';
 import Shape from './Shape';
+import { RNSVGLinearGradient } from './NativeComponents';
 
 export default class LinearGradient extends Shape<{
   id?: string;
@@ -39,7 +39,3 @@ export default class LinearGradient extends Shape<{
     );
   }
 }
-
-export const RNSVGLinearGradient = requireNativeComponent(
-  'RNSVGLinearGradient',
-);

src/elements/Marker.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
 import extractViewBox from '../lib/extract/extractViewBox';
 import { NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
+import { RNSVGMarker } from './NativeComponents';
 
 export default class Marker extends Shape<{
   id?: string;
@@ -57,5 +57,3 @@ export default class Marker extends Shape<{
     );
   }
 }
-
-export const RNSVGMarker = requireNativeComponent('RNSVGMarker');

src/elements/Mask.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
 import extractTransform from '../lib/extract/extractTransform';
 import { withoutXY } from '../lib/extract/extractProps';
 import { NumberProp, TransformProps } from '../lib/extract/types';
 import units from '../lib/units';
 import Shape from './Shape';
+import { RNSVGMask } from './NativeComponents';
 
 export default class Mask extends Shape<{
   x?: NumberProp;
@@ -57,5 +57,3 @@ export default class Mask extends Shape<{
     );
   }
 }
-
-export const RNSVGMask = requireNativeComponent('RNSVGMask');

src/elements/NativeComponents.tsx

@@ -0,0 +1,23 @@
+import { requireNativeComponent as rnc } from 'react-native';
+
+export const RNSVGSvg = rnc('RNSVGSvgView');
+export const RNSVGCircle = rnc('RNSVGCircle');
+export const RNSVGClipPath = rnc('RNSVGClipPath');
+export const RNSVGDefs = rnc('RNSVGDefs');
+export const RNSVGEllipse = rnc('RNSVGEllipse');
+export const RNSVGForeignObject = rnc('RNSVGForeignObject');
+export const RNSVGGroup = rnc('RNSVGGroup');
+export const RNSVGImage = rnc('RNSVGImage');
+export const RNSVGLine = rnc('RNSVGLine');
+export const RNSVGLinearGradient = rnc('RNSVGLinearGradient');
+export const RNSVGMarker = rnc('RNSVGMarker');
+export const RNSVGMask = rnc('RNSVGMask');
+export const RNSVGPath = rnc('RNSVGPath');
+export const RNSVGPattern = rnc('RNSVGPattern');
+export const RNSVGRadialGradient = rnc('RNSVGRadialGradient');
+export const RNSVGRect = rnc('RNSVGRect');
+export const RNSVGSymbol = rnc('RNSVGSymbol');
+export const RNSVGText = rnc('RNSVGText');
+export const RNSVGTextPath = rnc('RNSVGTextPath');
+export const RNSVGTSpan = rnc('RNSVGTSpan');
+export const RNSVGUse = rnc('RNSVGUse');

src/elements/Path.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
 import { extract } from '../lib/extract/extractProps';
 import Shape from './Shape';
+import { RNSVGPath } from './NativeComponents';
 
 export default class Path extends Shape<{
   d?: string;
@@ -15,5 +15,3 @@ export default class Path extends Shape<{
     );
   }
 }
-
-export const RNSVGPath = requireNativeComponent('RNSVGPath');

src/elements/Pattern.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
 import extractTransform from '../lib/extract/extractTransform';
 import extractViewBox from '../lib/extract/extractViewBox';
 import { NumberProp, TransformProps } from '../lib/extract/types';
 import units from '../lib/units';
 import Shape from './Shape';
+import { RNSVGPattern } from './NativeComponents';
 
 export default class Pattern extends Shape<{
   id?: string;
@@ -66,5 +66,3 @@ export default class Pattern extends Shape<{
     );
   }
 }
-
-export const RNSVGPattern = requireNativeComponent('RNSVGPattern');

src/elements/RadialGradient.tsx

@@ -1,8 +1,8 @@
 import React, { ReactElement } from 'react';
-import { requireNativeComponent } from 'react-native';
 import extractGradient from '../lib/extract/extractGradient';
 import { NumberProp, TransformProps } from '../lib/extract/types';
 import Shape from './Shape';
+import { RNSVGRadialGradient } from './NativeComponents';
 
 export default class RadialGradient extends Shape<{
   fx?: NumberProp;
@@ -43,7 +43,3 @@ export default class RadialGradient extends Shape<{
     );
   }
 }
-
-export const RNSVGRadialGradient = requireNativeComponent(
-  'RNSVGRadialGradient',
-);

src/elements/Rect.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
 import { withoutXY } from '../lib/extract/extractProps';
 import { NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
+import { RNSVGRect } from './NativeComponents';
 
 export default class Rect extends Shape<{
   x?: NumberProp;
@@ -38,5 +38,3 @@ export default class Rect extends Shape<{
     );
   }
 }
-
-export const RNSVGRect = requireNativeComponent('RNSVGRect');