feat: placeholders for unimplemented filters and support for Web (#2392)

USAGE.md

@@ -1257,14 +1257,37 @@ const styles = StyleSheet.create({
 
 Filter effects are a way of processing an element’s rendering before it is displayed in the document. Typically, rendering an element via CSS or SVG can conceptually be described as if the element, including its children, are drawn into a buffer (such as a raster image) and then that buffer is composited into the elements parent. Filters apply an effect before the compositing stage. Examples of such effects are blurring, changing color intensity and warping the image.
 
-Currently supported\* filters are:
+> [!NOTE]
+> Not all filters have been implemented on native platforms yet. However, they do work on the Web, so we added them. Some filters will display a warning indicating they are not currently supported.
+
+The following filters have been implemented:
 
 - FeColorMatrix
 - FeGaussianBlur
 - FeMerge
 - FeOffset
 
-\*_More filters are coming soon_
+Not supported yet:
+
+- FeBlend
+- FeComponentTransfer
+- FeComposite
+- FeConvolveMatrix
+- FeDiffuseLighting
+- FeDisplacementMap
+- FeDropShadow
+- FeFlood
+- FeFuncA
+- FeFuncB
+- FeFuncG
+- FeFuncR
+- FeImage
+- FeMorphology
+- FePointLight
+- FeSpecularLighting
+- FeSpotLight
+- FeTile
+- FeTurbulence
 
 Exmaple use of filters:
 

src/ReactNativeSVG.ts

@@ -63,11 +63,33 @@ export {
 export type { CircleProps } from './elements/Circle';
 export type { ClipPathProps } from './elements/ClipPath';
 export type { EllipseProps } from './elements/Ellipse';
+export type { FeBlendProps } from './elements/filters/FeBlend';
 export type { FeColorMatrixProps } from './elements/filters/FeColorMatrix';
+export type { FeComponentTransferProps } from './elements/filters/FeComponentTransfer';
+export type {
+  FeFuncAProps,
+  FeFuncBProps,
+  FeFuncGProps,
+  FeFuncRProps,
+} from './elements/filters/FeComponentTransferFunction';
+export type { FeCompositeProps } from './elements/filters/FeComposite';
+export type { FeConvolveMatrixProps } from './elements/filters/FeConvolveMatrix';
+export type { FeDiffuseLightingProps } from './elements/filters/FeDiffuseLighting';
+export type { FeDisplacementMapProps } from './elements/filters/FeDisplacementMap';
+export type { FeDistantLightProps } from './elements/filters/FeDistantLight';
+export type { FeDropShadowProps } from './elements/filters/FeDropShadow';
+export type { FeFloodProps } from './elements/filters/FeFlood';
 export type { FeGaussianBlurProps } from './elements/filters/FeGaussianBlur';
+export type { FeImageProps } from './elements/filters/FeImage';
 export type { FeMergeProps } from './elements/filters/FeMerge';
 export type { FeMergeNodeProps } from './elements/filters/FeMergeNode';
+export type { FeMorphologyProps } from './elements/filters/FeMorphology';
 export type { FeOffsetProps } from './elements/filters/FeOffset';
+export type { FePointLightProps } from './elements/filters/FePointLight';
+export type { FeSpecularLightingProps } from './elements/filters/FeSpecularLighting';
+export type { FeSpotLightProps } from './elements/filters/FeSpotLight';
+export type { FeTileProps } from './elements/filters/FeTile';
+export type { FeTurbulenceProps } from './elements/filters/FeTurbulence';
 export type { FilterProps } from './elements/filters/Filter';
 export type { FilterPrimitiveCommonProps } from './elements/filters/FilterPrimitive';
 export type { ForeignObjectProps } from './elements/ForeignObject';

src/elements.ts

@@ -22,11 +22,33 @@ import TSpan from './elements/TSpan';
 import Text from './elements/Text';
 import TextPath from './elements/TextPath';
 import Use from './elements/Use';
+import FeBlend from './elements/filters/FeBlend';
 import FeColorMatrix from './elements/filters/FeColorMatrix';
+import FeComponentTransfer from './elements/filters/FeComponentTransfer';
+import {
+  FeFuncA,
+  FeFuncB,
+  FeFuncG,
+  FeFuncR,
+} from './elements/filters/FeComponentTransferFunction';
+import FeComposite from './elements/filters/FeComposite';
+import FeConvolveMatrix from './elements/filters/FeConvolveMatrix';
+import FeDiffuseLighting from './elements/filters/FeDiffuseLighting';
+import FeDisplacementMap from './elements/filters/FeDisplacementMap';
+import FeDistantLight from './elements/filters/FeDistantLight';
+import FeDropShadow from './elements/filters/FeDropShadow';
+import FeFlood from './elements/filters/FeFlood';
 import FeGaussianBlur from './elements/filters/FeGaussianBlur';
+import FeImage from './elements/filters/FeImage';
 import FeMerge from './elements/filters/FeMerge';
 import FeMergeNode from './elements/filters/FeMergeNode';
+import FeMorphology from './elements/filters/FeMorphology';
 import FeOffset from './elements/filters/FeOffset';
+import FePointLight from './elements/filters/FePointLight';
+import FeSpecularLighting from './elements/filters/FeSpecularLighting';
+import FeSpotLight from './elements/filters/FeSpotLight';
+import FeTile from './elements/filters/FeTile';
+import FeTurbulence from './elements/filters/FeTurbulence';
 import Filter from './elements/filters/Filter';
 
 export {
@@ -34,11 +56,31 @@ export {
   ClipPath,
   Defs,
   Ellipse,
+  FeBlend,
   FeColorMatrix,
+  FeComponentTransfer,
+  FeComposite,
+  FeConvolveMatrix,
+  FeDiffuseLighting,
+  FeDisplacementMap,
+  FeDistantLight,
+  FeDropShadow,
+  FeFlood,
+  FeFuncA,
+  FeFuncB,
+  FeFuncG,
+  FeFuncR,
   FeGaussianBlur,
+  FeImage,
   FeMerge,
   FeMergeNode,
+  FeMorphology,
   FeOffset,
+  FePointLight,
+  FeSpecularLighting,
+  FeSpotLight,
+  FeTile,
+  FeTurbulence,
   Filter,
   ForeignObject,
   G,
@@ -56,9 +98,9 @@ export {
   Stop,
   Svg,
   Symbol,
-  TSpan,
   Text,
   TextPath,
+  TSpan,
   Use,
 };
 

src/elements.web.ts

@@ -1,11 +1,33 @@
 import type { CircleProps } from './elements/Circle';
 import type { ClipPathProps } from './elements/ClipPath';
 import type { EllipseProps } from './elements/Ellipse';
+import type { FeBlendProps } from './elements/filters/FeBlend';
 import type { FeColorMatrixProps } from './elements/filters/FeColorMatrix';
+import type { FeComponentTransferProps } from './elements/filters/FeComponentTransfer';
+import type {
+  FeFuncAProps,
+  FeFuncBProps,
+  FeFuncGProps,
+  FeFuncRProps,
+} from './elements/filters/FeComponentTransferFunction';
+import type { FeCompositeProps } from './elements/filters/FeComposite';
+import type { FeConvolveMatrixProps } from './elements/filters/FeConvolveMatrix';
+import type { FeDiffuseLightingProps } from './elements/filters/FeDiffuseLighting';
+import type { FeDisplacementMapProps } from './elements/filters/FeDisplacementMap';
+import type { FeDistantLightProps } from './elements/filters/FeDistantLight';
+import type { FeDropShadowProps } from './elements/filters/FeDropShadow';
+import type { FeFloodProps } from './elements/filters/FeFlood';
 import type { FeGaussianBlurProps } from './elements/filters/FeGaussianBlur';
+import type { FeImageProps } from './elements/filters/FeImage';
 import type { FeMergeProps } from './elements/filters/FeMerge';
 import type { FeMergeNodeProps } from './elements/filters/FeMergeNode';
+import type { FeMorphologyProps } from './elements/filters/FeMorphology';
 import type { FeOffsetProps } from './elements/filters/FeOffset';
+import type { FePointLightProps } from './elements/filters/FePointLight';
+import type { FeSpecularLightingProps } from './elements/filters/FeSpecularLighting';
+import type { FeSpotLightProps } from './elements/filters/FeSpotLight';
+import type { FeTileProps } from './elements/filters/FeTile';
+import type { FeTurbulenceProps } from './elements/filters/FeTurbulence';
 import type { FilterProps } from './elements/filters/Filter';
 import type { ForeignObjectProps } from './elements/ForeignObject';
 import type { GProps } from './elements/G';
@@ -47,14 +69,78 @@ export class Ellipse extends WebShape<BaseProps & EllipseProps> {
   tag = 'ellipse' as const;
 }
 
+export class FeBlend extends WebShape<BaseProps & FeBlendProps> {
+  tag = 'feBlend' as const;
+}
+
 export class FeColorMatrix extends WebShape<BaseProps & FeColorMatrixProps> {
   tag = 'feColorMatrix' as const;
 }
 
+export class FeComponentTransfer extends WebShape<
+  BaseProps & FeComponentTransferProps
+> {
+  tag = 'feComponentTransfer' as const;
+}
+
+export class FeComposite extends WebShape<BaseProps & FeCompositeProps> {
+  tag = 'feComposite' as const;
+}
+
+export class FeConvolveMatrix extends WebShape<
+  BaseProps & FeConvolveMatrixProps
+> {
+  tag = 'feConvolveMatrix' as const;
+}
+
+export class FeDiffuseLighting extends WebShape<
+  BaseProps & FeDiffuseLightingProps
+> {
+  tag = 'feDiffuseLighting' as const;
+}
+
+export class FeDisplacementMap extends WebShape<
+  BaseProps & FeDisplacementMapProps
+> {
+  tag = 'feDisplacementMap' as const;
+}
+
+export class FeDistantLight extends WebShape<BaseProps & FeDistantLightProps> {
+  tag = 'feDistantLight' as const;
+}
+
+export class FeDropShadow extends WebShape<BaseProps & FeDropShadowProps> {
+  tag = 'feDropShadow' as const;
+}
+
+export class FeFlood extends WebShape<BaseProps & FeFloodProps> {
+  tag = 'feFlood' as const;
+}
+
+export class FeFuncA extends WebShape<BaseProps & FeFuncAProps> {
+  tag = 'feFuncA' as const;
+}
+
+export class FeFuncB extends WebShape<BaseProps & FeFuncBProps> {
+  tag = 'feFuncB' as const;
+}
+
+export class FeFuncG extends WebShape<BaseProps & FeFuncGProps> {
+  tag = 'feFuncG' as const;
+}
+
+export class FeFuncR extends WebShape<BaseProps & FeFuncRProps> {
+  tag = 'feFuncR' as const;
+}
+
 export class FeGaussianBlur extends WebShape<BaseProps & FeGaussianBlurProps> {
   tag = 'feGaussianBlur' as const;
 }
 
+export class FeImage extends WebShape<BaseProps & FeImageProps> {
+  tag = 'feImage' as const;
+}
+
 export class FeMerge extends WebShape<BaseProps & FeMergeProps> {
   tag = 'feMerge' as const;
 }
@@ -63,10 +149,36 @@ export class FeMergeNode extends WebShape<BaseProps & FeMergeNodeProps> {
   tag = 'feMergeNode' as const;
 }
 
+export class FeMorphology extends WebShape<BaseProps & FeMorphologyProps> {
+  tag = 'feMorphology' as const;
+}
+
 export class FeOffset extends WebShape<BaseProps & FeOffsetProps> {
   tag = 'feOffset' as const;
 }
 
+export class FePointLight extends WebShape<BaseProps & FePointLightProps> {
+  tag = 'fePointLight' as const;
+}
+
+export class FeSpecularLighting extends WebShape<
+  BaseProps & FeSpecularLightingProps
+> {
+  tag = 'feSpecularLighting' as const;
+}
+
+export class FeSpotLight extends WebShape<BaseProps & FeSpotLightProps> {
+  tag = 'feSpotLight' as const;
+}
+
+export class FeTile extends WebShape<BaseProps & FeTileProps> {
+  tag = 'feTile' as const;
+}
+
+export class FeTurbulence extends WebShape<BaseProps & FeTurbulenceProps> {
+  tag = 'feTurbulence' as const;
+}
+
 export class Filter extends WebShape<BaseProps & FilterProps> {
   tag = 'filter' as const;
 }

src/elements/filters/FeBlend.tsx

@@ -0,0 +1,23 @@
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+
+type BlendMode = 'normal' | 'multiply' | 'screen' | 'darken' | 'lighten';
+
+export interface FeBlendProps {
+  in?: string;
+  in2?: string;
+  mode?: BlendMode;
+}
+
+export default class FeBlend extends FilterPrimitive<FeBlendProps> {
+  static displayName = 'FeBlend';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeComponentTransfer.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import FilterPrimitive from './FilterPrimitive';
+import { warnUnimplementedFilter } from '../../lib/util';
+
+export interface FeComponentTransferProps {
+  in?: string;
+  children?: React.ReactElement | Array<React.ReactElement>;
+}
+
+export default class FeComponentTransfer extends FilterPrimitive<FeComponentTransferProps> {
+  static displayName = 'FeComponentTransfer';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeComponentTransferFunction.tsx

@@ -0,0 +1,60 @@
+import { NumberArray, NumberProp } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+
+type FunctionChannel = 'R' | 'G' | 'B' | 'A' | 'UNKNOWN';
+type FunctionType = 'identity' | 'table' | 'discrete' | 'linear' | 'gamma';
+
+export type FeComponentTransferFunctionProps = {
+  type: FunctionType;
+  tableValues?: NumberArray;
+  slope?: NumberProp;
+  intercept?: NumberProp;
+  amplitude?: NumberProp;
+  exponent?: NumberProp;
+  offset?: NumberProp;
+};
+
+export default class FeComponentTransferFunction extends FilterPrimitive<FeComponentTransferFunctionProps> {
+  channel: FunctionChannel = 'UNKNOWN';
+  static defaultProps: React.ComponentProps<
+    typeof FeComponentTransferFunction
+  > = {
+    type: 'identity',
+    tableValues: [],
+    slope: 1,
+    intercept: 0,
+    amplitude: 1,
+    exponent: 1,
+    offset: 0,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}
+
+export type FeFuncRProps = FeComponentTransferFunctionProps;
+export class FeFuncR extends FeComponentTransferFunction {
+  static displayName = 'FeFuncR';
+  channel: FunctionChannel = 'R';
+}
+
+export type FeFuncGProps = FeComponentTransferFunctionProps;
+export class FeFuncG extends FeComponentTransferFunction {
+  static displayName = 'FeFuncG';
+  channel: FunctionChannel = 'G';
+}
+
+export type FeFuncBProps = FeComponentTransferFunctionProps;
+export class FeFuncB extends FeComponentTransferFunction {
+  static displayName = 'FeFuncB';
+  channel: FunctionChannel = 'B';
+}
+
+export type FeFuncAProps = FeComponentTransferFunctionProps;
+export class FeFuncA extends FeComponentTransferFunction {
+  static displayName = 'FeFuncA';
+  channel: FunctionChannel = 'A';
+}

src/elements/filters/FeComposite.tsx

@@ -0,0 +1,34 @@
+import { NumberProp } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+
+type FeCompositeOperator =
+  | 'over'
+  | 'in'
+  | 'out'
+  | 'atop'
+  | 'xor'
+  | 'arithmetic';
+
+export interface FeCompositeProps {
+  in?: string;
+  in2?: string;
+  operator?: FeCompositeOperator;
+  k1?: NumberProp;
+  k2?: NumberProp;
+  k3?: NumberProp;
+  k4?: NumberProp;
+}
+
+export default class FeComposite extends FilterPrimitive<FeCompositeProps> {
+  static displayName = 'FeComposite';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeConvolveMatrix.tsx

@@ -0,0 +1,30 @@
+import { BooleanProp, NumberArray, NumberProp } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+import { EdgeMode } from './types';
+
+export interface FeConvolveMatrixProps {
+  in?: string;
+  order?: NumberArray;
+  kernelMatrix?: NumberArray;
+  divisor?: NumberProp;
+  bias?: NumberProp;
+  targetX?: NumberProp;
+  targetY?: NumberProp;
+  edgeMode?: EdgeMode;
+  kernelUnitLength?: NumberArray;
+  preserveAlpha?: BooleanProp;
+}
+
+export default class FeConvolveMatrix extends FilterPrimitive<FeConvolveMatrixProps> {
+  static displayName = 'FeConvolveMatrix';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeDiffuseLighting.tsx

@@ -0,0 +1,23 @@
+import { NumberArray, NumberProp } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+
+export interface FeDiffuseLightingProps {
+  in?: string;
+  surfaceScale?: NumberProp;
+  diffuseConstant?: NumberProp;
+  kernelUnitLength?: NumberArray;
+}
+
+export default class FeDiffuseLighting extends FilterPrimitive<FeDiffuseLightingProps> {
+  static displayName = 'FeDiffuseLighting';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeDisplacementMap.tsx

@@ -0,0 +1,25 @@
+import { NumberProp } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+import { ChannelSelector } from './types';
+
+export interface FeDisplacementMapProps {
+  in?: string;
+  in2?: string;
+  scale?: NumberProp;
+  xChannelSelector?: ChannelSelector;
+  yChannelSelector?: ChannelSelector;
+}
+
+export default class FeDisplacementMap extends FilterPrimitive<FeDisplacementMapProps> {
+  static displayName = 'FeDisplacementMap';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeDistantLight.tsx

@@ -0,0 +1,19 @@
+import { Component } from 'react';
+import { NumberProp } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+
+export interface FeDistantLightProps {
+  azimuth?: NumberProp;
+  elevation?: NumberProp;
+}
+
+export default class FeDistantLight extends Component<FeDistantLightProps> {
+  static displayName = 'FeDistantLight';
+
+  static defaultProps = {};
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeDropShadow.tsx

@@ -0,0 +1,23 @@
+import { NumberArray, NumberProp } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+
+export interface FeDropShadowProps {
+  in?: string;
+  stdDeviation?: NumberArray;
+  dx?: NumberProp;
+  dy?: NumberProp;
+}
+
+export default class FeDropShadow extends FilterPrimitive<FeDropShadowProps> {
+  static displayName = 'FeDropShadow';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeFlood.tsx

@@ -0,0 +1,23 @@
+import { ColorValue } from 'react-native';
+import { NumberProp } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+
+export interface FeFloodProps {
+  in?: string;
+  floodColor?: ColorValue;
+  floodOpacity?: NumberProp;
+}
+
+export default class FeFlood extends FilterPrimitive<FeFloodProps> {
+  static displayName = 'FeFlood';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeImage.tsx

@@ -0,0 +1,21 @@
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+
+export interface FeImageProps {
+  href?: string;
+  preserveAspectRatio?: string;
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+}
+
+export default class FeImage extends FilterPrimitive<FeImageProps> {
+  static displayName = 'FeImage';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeMorphology.tsx

@@ -0,0 +1,22 @@
+import { NumberArray } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+
+export interface FeMorphologyProps {
+  in?: string;
+  operator?: 'erode' | 'dilate';
+  radius?: NumberArray;
+}
+
+export default class FeMorphology extends FilterPrimitive<FeMorphologyProps> {
+  static displayName = 'FeMorphology';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FePointLight.tsx

@@ -0,0 +1,20 @@
+import { Component } from 'react';
+import { NumberProp } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+
+export interface FePointLightProps {
+  x?: NumberProp;
+  y?: NumberProp;
+  z?: NumberProp;
+}
+
+export default class FePointLight extends Component<FePointLightProps> {
+  static displayName = 'FePointLight';
+
+  static defaultProps = {};
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeSpecularLighting.tsx

@@ -0,0 +1,24 @@
+import { NumberArray, NumberProp } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+
+export interface FeSpecularLightingProps {
+  in?: string;
+  surfaceScale?: NumberProp;
+  specularConstant?: NumberProp;
+  specularExponent?: NumberProp;
+  kernelUnitLength?: NumberArray;
+}
+
+export default class FeSpecularLighting extends FilterPrimitive<FeSpecularLightingProps> {
+  static displayName = 'FeSpecularLighting';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeSpotLight.tsx

@@ -0,0 +1,25 @@
+import { Component } from 'react';
+import { NumberProp } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+
+export interface FeSpotLightProps {
+  x?: NumberProp;
+  y?: NumberProp;
+  z?: NumberProp;
+  pointsAtX?: NumberProp;
+  pointsAtY?: NumberProp;
+  pointsAtZ?: NumberProp;
+  specularExponent?: NumberProp;
+  limitingConeAngle?: NumberProp;
+}
+
+export default class FeSpotLight extends Component<FeSpotLightProps> {
+  static displayName = 'FeSpotLight';
+
+  static defaultProps = {};
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeTile.tsx

@@ -0,0 +1,19 @@
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+
+export interface FeTileProps {
+  in?: string;
+}
+
+export default class FeTile extends FilterPrimitive<FeTileProps> {
+  static displayName = 'FeTile';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/FeTurbulence.tsx

@@ -0,0 +1,24 @@
+import { NumberArray, NumberProp } from '../../lib/extract/types';
+import { warnUnimplementedFilter } from '../../lib/util';
+import FilterPrimitive from './FilterPrimitive';
+
+export interface FeTurbulenceProps {
+  baseFrequency?: NumberArray;
+  numOctaves?: NumberProp;
+  seed?: NumberProp;
+  stitchTiles?: 'stitch' | 'noStitch';
+  type?: 'fractalNoise' | 'turbulence';
+}
+
+export default class FeTurbulence extends FilterPrimitive<FeTurbulenceProps> {
+  static displayName = 'FeTurbulence';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+  };
+
+  render() {
+    warnUnimplementedFilter();
+    return null;
+  }
+}

src/elements/filters/types.ts

@@ -0,0 +1,2 @@
+export type EdgeMode = 'duplicate' | 'wrap' | 'none';
+export type ChannelSelector = 'R' | 'G' | 'B' | 'A';

src/lib/extract/types.ts

@@ -9,6 +9,7 @@ import type React from 'react';
 
 export type NumberProp = string | number;
 export type NumberArray = NumberProp[] | NumberProp;
+export type BooleanProp = boolean | 'true' | 'false';
 
 export type FillRule = 'evenodd' | 'nonzero';
 export type Units = 'userSpaceOnUse' | 'objectBoundingBox';

src/lib/util.ts

@@ -1,3 +1,5 @@
+import warnOnce from 'warn-once';
+
 export function pickNotNil(object: { [prop: string]: unknown }) {
   const result: { [prop: string]: unknown } = {};
   for (const key in object) {
@@ -15,3 +17,35 @@ export const idPattern = /#([^)]+)\)?$/;
 
 export const getRandomNumber = () =>
   Math.floor(Math.random() * Math.floor(Math.random() * Date.now()));
+
+export const warnUnimplementedFilter = () => {
+  warnOnce(
+    true,
+    `Some of the used filters are not yet supported on native platforms. Please check the USAGE.md for more info. Not implemented filters:\n`,
+    JSON.stringify(
+      [
+        'FeBlend',
+        'FeComponentTransfer',
+        'FeComposite',
+        'FeConvolveMatrix',
+        'FeDiffuseLighting',
+        'FeDisplacementMap',
+        'FeDropShadow',
+        'FeFlood',
+        'FeFuncA',
+        'FeFuncB',
+        'FeFuncG',
+        'FeFuncR',
+        'FeImage',
+        'FeMorphology',
+        'FePointLight',
+        'FeSpecularLighting',
+        'FeSpotLight',
+        'FeTile',
+        'FeTurbulence',
+      ],
+      null,
+      2
+    )
+  );
+};

src/xmlTags.ts

@@ -3,11 +3,27 @@ import {
   ClipPath,
   Defs,
   Ellipse,
+  FeBlend,
   FeColorMatrix,
+  FeComponentTransfer,
+  FeComposite,
+  FeConvolveMatrix,
+  FeDiffuseLighting,
+  FeDisplacementMap,
+  FeDistantLight,
+  FeDropShadow,
+  FeFlood,
   FeGaussianBlur,
+  FeImage,
   FeMerge,
   FeMergeNode,
+  FeMorphology,
   FeOffset,
+  FePointLight,
+  FeSpecularLighting,
+  FeSpotLight,
+  FeTile,
+  FeTurbulence,
   Filter,
   ForeignObject,
   G,
@@ -37,11 +53,27 @@ export const tags = {
   defs: Defs,
   ellipse: Ellipse,
   filter: Filter,
+  feBlend: FeBlend,
   feColorMatrix: FeColorMatrix,
+  feComponentTransfer: FeComponentTransfer,
+  feComposite: FeComposite,
+  feConvolveMatrix: FeConvolveMatrix,
+  feDiffuseLighting: FeDiffuseLighting,
+  feDisplacementMap: FeDisplacementMap,
+  feDistantLight: FeDistantLight,
+  feDropShadow: FeDropShadow,
+  feFlood: FeFlood,
   feGaussianBlur: FeGaussianBlur,
+  feImage: FeImage,
   feMerge: FeMerge,
   feMergeNode: FeMergeNode,
+  feMorphology: FeMorphology,
   feOffset: FeOffset,
+  fePointLight: FePointLight,
+  feSpecularLighting: FeSpecularLighting,
+  feSpotLight: FeSpotLight,
+  feTile: FeTile,
+  feTurbulence: FeTurbulence,
   foreignObject: ForeignObject,
   g: G,
   image: Image,