Typescript wrappers for all the elements currently supported by react-native-svg

SvgWrappers.tsx

import * as React from 'react';
import { StyleSheet, GestureResponderEvent } from 'react-native';
import * as RNSVG from 'react-native-svg';
export type CommonPathProps = RNSVG.CommonPathProps;

type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;

class ClipPath extends React.Component<
  {
    id: string;
  } & RNSVG.ClipPath
> {
  render() {
    // @ts-ignore
    return <RNSVG.ClipPath {...this.props} />;
  }
}

class LinearGradient extends React.Component<
  {
    id: string;
  } & RNSVG.LinearGradient
> {
  render() {
    // @ts-ignore
    return <RNSVG.LinearGradient {...this.props} />;
  }
}

class RadialGradient extends React.Component<
  {
    id: string;
  } & RNSVG.RadialGradient
> {
  render() {
    // @ts-ignore
    return <RNSVG.RadialGradient {...this.props} />;
  }
}

class Pattern extends React.Component<
  {
    id: string;
  } & RNSVG.Pattern
> {
  render() {
    // @ts-ignore
    return <RNSVG.Pattern {...this.props} />;
  }
}

class Defs extends React.Component<
  {
    id: string;
  } & RNSVG.Defs
> {
  render() {
    // @ts-ignore
    return <RNSVG.Defs {...this.props} />;
  }
}

class Stop extends React.Component<
  {
    id: string;
  } & RNSVG.Stop
> {
  render() {
    // @ts-ignore
    return <RNSVG.Stop {...this.props} />;
  }
}

class Svg extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.SvgProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Svg onPress={onPress} {...rest} />;
  }
}

class Circle extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.CircleProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Circle onPress={onPress} {...rest} />;
  }
}

class Ellipse extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.EllipseProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Ellipse onPress={onPress} {...rest} />;
  }
}

class ForeignObject extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.ForeignObjectProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.ForeignObject onPress={onPress} {...rest} />;
  }
}

class G extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.GProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.G onPress={onPress} {...rest} />;
  }
}

class Line extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.LineProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Line onPress={onPress} {...rest} />;
  }
}

class Marker extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.MarkerProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Marker onPress={onPress} {...rest} />;
  }
}

class Path extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.PathProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Path onPress={onPress} {...rest} />;
  }
}

class Polygon extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.PolygonProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Polygon onPress={onPress} {...rest} />;
  }
}

class Polyline extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.PolylineProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Polyline onPress={onPress} {...rest} />;
  }
}

class Rect extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.RectProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Rect onPress={onPress} {...rest} />;
  }
}

class Symbol extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.SymbolProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Symbol onPress={onPress} {...rest} />;
  }
}

class Text extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.TextProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Text onPress={onPress} {...rest} />;
  }
}

class TextPath extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.TextPathProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.TextPath onPress={onPress} {...rest} />;
  }
}

class TSpan extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.TSpanProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.TSpan onPress={onPress} {...rest} />;
  }
}

class Use extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.UseProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Use onPress={onPress} {...rest} />;
  }
}

class Mask extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.MaskProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Mask onPress={onPress} {...rest} />;
  }
}

class Image extends React.Component<
  {
    id?: string;
  } & Overwrite<RNSVG.ImageProps, { onPress?: (e: GestureResponderEvent, id?: string) => void }>
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Image onPress={onPress} {...rest} />;
  }
}

export {
  ClipPath,
  LinearGradient,
  RadialGradient,
  Pattern,
  Defs,
  Stop,
  Svg,
  Circle,
  Ellipse,
  ForeignObject,
  G,
  Line,
  Marker,
  Path,
  Polygon,
  Polyline,
  Rect,
  Symbol,
  Text,
  TextPath,
  TSpan,
  Use,
  Mask,
  Image,
};