feat: expose native components

src/elements/Circle.tsx

@@ -32,4 +32,4 @@ export default class Circle extends Shape<{
   }
 }
 
-const RNSVGCircle = requireNativeComponent('RNSVGCircle');
+export const RNSVGCircle = requireNativeComponent('RNSVGCircle');

src/elements/ClipPath.tsx

@@ -21,4 +21,4 @@ export default class ClipPath extends Shape<{
   }
 }
 
-const RNSVGClipPath = requireNativeComponent('RNSVGClipPath');
+export const RNSVGClipPath = requireNativeComponent('RNSVGClipPath');

src/elements/Defs.tsx

@@ -9,4 +9,4 @@ export default class Defs extends Component {
   }
 }
 
-const RNSVGDefs = requireNativeComponent('RNSVGDefs');
+export const RNSVGDefs = requireNativeComponent('RNSVGDefs');

src/elements/Ellipse.tsx

@@ -35,4 +35,4 @@ export default class Ellipse extends Shape<{
   }
 }
 
-const RNSVGEllipse = requireNativeComponent('RNSVGEllipse');
+export const RNSVGEllipse = requireNativeComponent('RNSVGEllipse');

src/elements/G.tsx

@@ -36,4 +36,4 @@ export default class G extends Shape<{}> {
   }
 }
 
-const RNSVGGroup = requireNativeComponent('RNSVGGroup');
+export const RNSVGGroup = requireNativeComponent('RNSVGGroup');

src/elements/Image.tsx

@@ -69,4 +69,4 @@ export default class SvgImage extends Shape<{
   }
 }
 
-const RNSVGImage = requireNativeComponent('RNSVGImage');
+export const RNSVGImage = requireNativeComponent('RNSVGImage');

src/elements/Line.tsx

@@ -35,4 +35,4 @@ export default class Line extends Shape<{
   }
 }
 
-const RNSVGLine = requireNativeComponent('RNSVGLine');
+export const RNSVGLine = requireNativeComponent('RNSVGLine');

src/elements/LinearGradient.tsx

@@ -40,4 +40,6 @@ export default class LinearGradient extends Shape<{
   }
 }
 
-const RNSVGLinearGradient = requireNativeComponent('RNSVGLinearGradient');
+export const RNSVGLinearGradient = requireNativeComponent(
+  'RNSVGLinearGradient',
+);

src/elements/Mask.tsx

@@ -58,4 +58,4 @@ export default class Mask extends Shape<{
   }
 }
 
-const RNSVGMask = requireNativeComponent('RNSVGMask');
+export const RNSVGMask = requireNativeComponent('RNSVGMask');

src/elements/Path.tsx

@@ -20,4 +20,4 @@ export default class Path extends Shape<{
   }
 }
 
-const RNSVGPath = requireNativeComponent('RNSVGPath');
+export const RNSVGPath = requireNativeComponent('RNSVGPath');

src/elements/Pattern.tsx

@@ -67,4 +67,4 @@ export default class Pattern extends Shape<{
   }
 }
 
-const RNSVGPattern = requireNativeComponent('RNSVGPattern');
+export const RNSVGPattern = requireNativeComponent('RNSVGPattern');

src/elements/RadialGradient.tsx

@@ -46,4 +46,6 @@ export default class RadialGradient extends Shape<{
   }
 }
 
-const RNSVGRadialGradient = requireNativeComponent('RNSVGRadialGradient');
+export const RNSVGRadialGradient = requireNativeComponent(
+  'RNSVGRadialGradient',
+);

src/elements/Rect.tsx

@@ -48,4 +48,4 @@ export default class Rect extends Shape<{
   }
 }
 
-const RNSVGRect = requireNativeComponent('RNSVGRect');
+export const RNSVGRect = requireNativeComponent('RNSVGRect');

src/elements/Svg.tsx

@@ -149,7 +149,7 @@ export default class Svg extends Shape<
       : null;
 
     return (
-      <NativeSvgView
+      <RNSVGSvg
         {...props}
         bbWidth={width}
         bbHeight={height}
@@ -179,9 +179,9 @@ export default class Svg extends Shape<
             strokeMiterlimit,
           }}
         />
-      </NativeSvgView>
+      </RNSVGSvg>
     );
   }
 }
 
-const NativeSvgView = requireNativeComponent('RNSVGSvgView');
+export const RNSVGSvg = requireNativeComponent('RNSVGSvgView');

src/elements/Symbol.tsx

@@ -21,4 +21,4 @@ export default class Symbol extends Shape<{
   }
 }
 
-const RNSVGSymbol = requireNativeComponent('RNSVGSymbol');
+export const RNSVGSymbol = requireNativeComponent('RNSVGSymbol');

src/elements/TSpan.tsx

@@ -43,4 +43,4 @@ export default class TSpan extends Shape<{}> {
 
 setTSpan(TSpan);
 
-const RNSVGTSpan = requireNativeComponent('RNSVGTSpan');
+export const RNSVGTSpan = requireNativeComponent('RNSVGTSpan');

src/elements/Text.tsx

@@ -42,4 +42,4 @@ export default class Text extends Shape<{}> {
   }
 }
 
-const RNSVGText = requireNativeComponent('RNSVGText');
+export const RNSVGText = requireNativeComponent('RNSVGText');

src/elements/TextPath.tsx

@@ -94,4 +94,4 @@ export default class TextPath extends Shape<{
   }
 }
 
-const RNSVGTextPath = requireNativeComponent('RNSVGTextPath');
+export const RNSVGTextPath = requireNativeComponent('RNSVGTextPath');

src/elements/Use.tsx

@@ -61,4 +61,4 @@ export default class Use extends Shape<{
   }
 }
 
-const RNSVGUse = requireNativeComponent('RNSVGUse');
+export const RNSVGUse = requireNativeComponent('RNSVGUse');

src/index.ts

@@ -1,25 +1,26 @@
-import Rect from './elements/Rect';
-import Circle from './elements/Circle';
-import Ellipse from './elements/Ellipse';
+import Shape from './elements/Shape';
+import Rect, { RNSVGRect } from './elements/Rect';
+import Circle, { RNSVGCircle } from './elements/Circle';
+import Ellipse, { RNSVGEllipse } from './elements/Ellipse';
 import Polygon from './elements/Polygon';
 import Polyline from './elements/Polyline';
-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 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 Stop from './elements/Stop';
-import ClipPath from './elements/ClipPath';
-import Pattern from './elements/Pattern';
-import Mask from './elements/Mask';
+import ClipPath, { RNSVGClipPath } from './elements/ClipPath';
+import Pattern, { RNSVGPattern } from './elements/Pattern';
+import Mask, { RNSVGMask } from './elements/Mask';
 import { parse, SvgAst, SvgFromUri, SvgFromXml, SvgUri, SvgXml } from './xml';
 
 export {
@@ -51,6 +52,26 @@ export {
   SvgFromXml,
   SvgUri,
   SvgXml,
+  Shape,
+  RNSVGMask,
+  RNSVGPattern,
+  RNSVGClipPath,
+  RNSVGRadialGradient,
+  RNSVGLinearGradient,
+  RNSVGDefs,
+  RNSVGSymbol,
+  RNSVGImage,
+  RNSVGUse,
+  RNSVGTextPath,
+  RNSVGTSpan,
+  RNSVGText,
+  RNSVGGroup,
+  RNSVGPath,
+  RNSVGLine,
+  RNSVGEllipse,
+  RNSVGCircle,
+  RNSVGRect,
+  RNSVGSvg,
 };
 
 export default Svg;

src/xml.tsx

@@ -120,7 +120,7 @@ export class SvgFromXml extends Component<XmlProps, XmlState> {
   componentDidMount() {
     this.parse(this.props.xml);
   }
-  componentDidUpdate(prevProps: { xml: string }) {
+  componentDidUpdate(prevProps: { xml: string | null }) {
     const { xml } = this.props;
     if (xml !== prevProps.xml) {
       this.parse(xml);