fix: types from lib folder (#1813)

Added missing component props and made Svg* component props extend SvgProps. Also removed custom Color type which is now just ColorValue from react-native.

package.json

@@ -47,7 +47,7 @@
     "bob": "bob build",
     "flow": "flow src",
     "flowtyped": "flow-typed install",
-    "format": "prettier README.md CONTRIBUTING.md CODE_OF_CONDUCT.md './src/**/*.{ts,tsx}'",
+    "format": "prettier --write README.md CONTRIBUTING.md CODE_OF_CONDUCT.md './src/**/*.{ts,tsx}'",
     "jest": "jest",
     "lint": "eslint --ext .ts,.tsx src",
     "peg": "pegjs -o src/lib/extract/transform.js ./src/lib/extract/transform.peg",

src/ReactNativeSVG.ts

@@ -1,29 +1,40 @@
 import Shape from './elements/Shape';
-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 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 Rect, { RectProps } from './elements/Rect';
+import Circle, { CircleProps } from './elements/Circle';
+import Ellipse, { EllipseProps } from './elements/Ellipse';
+import Polygon, { PolygonProps } from './elements/Polygon';
+import Polyline, { PolylineProps } from './elements/Polyline';
+import Line, { LineProps } from './elements/Line';
+import Svg, { SvgProps } from './elements/Svg';
+import Path, { PathProps } from './elements/Path';
+import G, { GProps } from './elements/G';
+import Text, { TextProps } from './elements/Text';
+import TSpan, { TSpanProps } from './elements/TSpan';
+import TextPath, { TextPathProps } from './elements/TextPath';
+import Use, { UseProps } from './elements/Use';
+import Image, { ImageProps } from './elements/Image';
+import Symbol, { SymbolProps } 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 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 LinearGradient, { LinearGradientProps } from './elements/LinearGradient';
+import RadialGradient, { RadialGradientProps } from './elements/RadialGradient';
+import Stop, { StopProps } from './elements/Stop';
+import ClipPath, { ClipPathProps } from './elements/ClipPath';
+import Pattern, { PatternProps } from './elements/Pattern';
+import Mask, { MaskProps } from './elements/Mask';
+import Marker, { MarkerProps } from './elements/Marker';
+import ForeignObject, { ForeignObjectProps } from './elements/ForeignObject';
+
+import {
+  parse,
+  SvgAst,
+  SvgFromUri,
+  SvgFromXml,
+  SvgUri,
+  SvgXml,
+  UriProps,
+  XmlProps,
+  AstProps,
+} from './xml';
 import {
   SvgCss,
   SvgCssUri,
@@ -56,6 +67,35 @@ import {
   RNSVGUse,
 } from './elements/NativeComponents';
 
+export {
+  RectProps,
+  CircleProps,
+  EllipseProps,
+  PolygonProps,
+  PolylineProps,
+  LineProps,
+  SvgProps,
+  PathProps,
+  GProps,
+  TextProps,
+  TSpanProps,
+  TextPathProps,
+  UseProps,
+  ImageProps,
+  SymbolProps,
+  LinearGradientProps,
+  RadialGradientProps,
+  StopProps,
+  ClipPathProps,
+  PatternProps,
+  MaskProps,
+  MarkerProps,
+  ForeignObjectProps,
+  UriProps,
+  XmlProps,
+  AstProps,
+};
+
 export {
   Svg,
   Circle,

src/elements/Stop.tsx

@@ -1,8 +1,9 @@
 import { Component } from 'react';
-import { Color, NumberProp } from '../lib/extract/types';
+import { ColorValue } from 'react-native';
+import { NumberProp } from '../lib/extract/types';
 
 export interface StopProps {
-  stopColor?: Color;
+  stopColor?: ColorValue;
   stopOpacity?: NumberProp;
   offset?: NumberProp;
   parent?: Component;

src/elements/Svg.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import {
+  ColorValue,
   findNodeHandle,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
@@ -12,7 +13,6 @@ import {
   ViewStyle,
 } from 'react-native';
 import {
-  Color,
   extractedProps,
   NumberProp,
   ResponderInstanceProps,
@@ -38,7 +38,7 @@ export interface SvgProps extends GProps, ViewProps {
   height?: NumberProp;
   viewBox?: string;
   preserveAspectRatio?: string;
-  color?: Color;
+  color?: ColorValue;
   title?: string;
 }
 

src/lib/extract/types.ts

@@ -96,10 +96,8 @@ export interface ResponderProps extends GestureResponderHandlers {
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
 }
 
-export type Color = ColorValue;
-
 export interface FillProps {
-  fill?: Color;
+  fill?: ColorValue;
   fillOpacity?: NumberProp;
   fillRule?: FillRule;
 }
@@ -124,7 +122,7 @@ export interface DefinitionProps {
 }
 
 export interface StrokeProps {
-  stroke?: Color;
+  stroke?: ColorValue;
   strokeWidth?: NumberProp;
   strokeOpacity?: NumberProp;
   strokeDasharray?: ReadonlyArray<NumberProp> | NumberProp;

src/xml.tsx

@@ -11,7 +11,7 @@ import Ellipse from './elements/Ellipse';
 import Polygon from './elements/Polygon';
 import Polyline from './elements/Polyline';
 import Line from './elements/Line';
-import Svg from './elements/Svg';
+import Svg, { SvgProps } from './elements/Svg';
 import Path from './elements/Path';
 import G from './elements/G';
 import Text from './elements/Text';
@@ -86,13 +86,13 @@ export type AdditionalProps = {
   override?: Object;
 };
 
-export type UriProps = { uri: string | null } & AdditionalProps;
+export type UriProps = SvgProps & { uri: string | null } & AdditionalProps;
 export type UriState = { xml: string | null };
 
-export type XmlProps = { xml: string | null } & AdditionalProps;
+export type XmlProps = SvgProps & { xml: string | null } & AdditionalProps;
 export type XmlState = { ast: JsxAST | null };
 
-export type AstProps = { ast: JsxAST | null } & AdditionalProps;
+export type AstProps = SvgProps & { ast: JsxAST | null } & AdditionalProps;
 
 export function SvgAst({ ast, override }: AstProps) {
   if (!ast) {