feat: add FeOffset filter (#2361)

# Summary

Continuation of #2316
Introducing new filter `FeOffset`.

## Test Plan

Example app -> Filters -> FeOffset

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅     |
| Android |    ✅     |

## Checklist

- [x] I have tested this on a device and a simulator
- [x] I added documentation in `README.md`
- [x] I updated the typed files (typescript)

src/ReactNativeSVG.ts

@@ -26,6 +26,7 @@ import ForeignObject from './elements/ForeignObject';
 import Filter from './elements/filters/Filter';
 import FeColorMatrix from './elements/filters/FeColorMatrix';
 import FeGaussianBlur from './elements/filters/FeGaussianBlur';
+import FeOffset from './elements/filters/FeOffset';
 
 import {
   parse,
@@ -73,6 +74,7 @@ import {
   RNSVGFilter,
   RNSVGFeColorMatrix,
   RNSVGFeGaussianBlur,
+  RNSVGFeOffset,
 } from './fabric';
 
 export {
@@ -112,6 +114,7 @@ export type { ForeignObjectProps } from './elements/ForeignObject';
 export type { FilterProps } from './elements/filters/Filter';
 export type { FeColorMatrixProps } from './elements/filters/FeColorMatrix';
 export type { FeGaussianBlurProps } from './elements/filters/FeGaussianBlur';
+export type { FeOffsetProps } from './elements/filters/FeOffset';
 export type { FilterPrimitiveCommonProps } from './elements/filters/FilterPrimitive';
 
 export * from './lib/extract/types';
@@ -153,6 +156,7 @@ export {
   Filter,
   FeColorMatrix,
   FeGaussianBlur,
+  FeOffset,
   RNSVGMarker,
   RNSVGMask,
   RNSVGPattern,
@@ -178,6 +182,7 @@ export {
   RNSVGFilter,
   RNSVGFeColorMatrix,
   RNSVGFeGaussianBlur,
+  RNSVGFeOffset,
 };
 
 export type {

src/elements/filters/FeOffset.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { NativeMethods } from 'react-native';
+import RNSVGFeOffset from '../../fabric/FeOffsetNativeComponent';
+import {
+  extractFeOffset,
+  extractFilter,
+} from '../../lib/extract/extractFilter';
+import { NumberProp } from '../../lib/extract/types';
+import FilterPrimitive from './FilterPrimitive';
+
+export interface FeOffsetProps {
+  in?: string;
+  dx?: NumberProp;
+  dy?: NumberProp;
+}
+
+export default class FeOffset extends FilterPrimitive<FeOffsetProps> {
+  static displayName = 'FeOffset';
+
+  static defaultProps = {
+    ...this.defaultPrimitiveProps,
+    dx: 0,
+    dy: 0,
+  };
+
+  render() {
+    return (
+      <RNSVGFeOffset
+        ref={(ref) => this.refMethod(ref as (FeOffset & NativeMethods) | null)}
+        {...extractFilter(this.props)}
+        {...extractFeOffset(this.props)}
+      />
+    );
+  }
+}

src/fabric/FeOffsetNativeComponent.ts

@@ -0,0 +1,21 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from './utils';
+
+import { NumberProp } from '../lib/extract/types';
+import type { UnsafeMixed } from './codegenUtils';
+
+interface FilterPrimitiveCommonProps {
+  x?: UnsafeMixed<NumberProp>;
+  y?: UnsafeMixed<NumberProp>;
+  width?: UnsafeMixed<NumberProp>;
+  height?: UnsafeMixed<NumberProp>;
+  result?: string;
+}
+
+export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
+  in1?: string;
+  dx?: UnsafeMixed<NumberProp>;
+  dy?: UnsafeMixed<NumberProp>;
+}
+
+export default codegenNativeComponent<NativeProps>('RNSVGFeOffset');

src/fabric/index.ts

@@ -23,6 +23,7 @@ import RNSVGUse from './UseNativeComponent';
 import RNSVGFilter from './FilterNativeComponent';
 import RNSVGFeColorMatrix from './FeColorMatrixNativeComponent';
 import RNSVGFeGaussianBlur from './FeGaussianBlurNativeComponent';
+import RNSVGFeOffset from './FeOffsetNativeComponent';
 
 export {
   RNSVGCircle,
@@ -50,4 +51,5 @@ export {
   RNSVGFilter,
   RNSVGFeColorMatrix,
   RNSVGFeGaussianBlur,
+  RNSVGFeOffset,
 };

src/filter-image/types.ts

@@ -1,9 +1,14 @@
 import { FilterPrimitiveCommonProps } from '../elements/filters/FilterPrimitive';
-import { FeColorMatrixProps, FeGaussianBlurProps } from '../index';
+import {
+  FeColorMatrixProps,
+  FeGaussianBlurProps,
+  FeOffsetProps,
+} from '../index';
 
 export type FilterElement = (
   | ({ name: 'feColorMatrix' } & FeColorMatrixProps)
   | ({ name: 'feGaussianBlur' } & FeGaussianBlurProps)
+  | ({ name: 'feOffset' } & FeOffsetProps)
 ) &
   FilterPrimitiveCommonProps;
 

src/lib/extract/extractFilter.ts

@@ -1,7 +1,9 @@
 import { FeColorMatrixProps as FeColorMatrixComponentProps } from '../../elements/filters/FeColorMatrix';
-import { FeGaussianBlurProps as FeGaussianBlurComponentProps } from '../../elements/filters/FeGaussianBlur';
 import { NativeProps as FeColorMatrixNativeProps } from '../../fabric/FeColorMatrixNativeComponent';
+import { FeGaussianBlurProps as FeGaussianBlurComponentProps } from '../../elements/filters/FeGaussianBlur';
 import { NativeProps as FeGaussianBlurNativeProps } from '../../fabric/FeGaussianBlurNativeComponent';
+import { FeOffsetProps as FeOffsetComponentProps } from '../../elements/filters/FeOffset';
+import { NativeProps as FeOffsetNativeProps } from '../../fabric/FeOffsetNativeComponent';
 import { NumberProp } from './types';
 
 const spaceReg = /\s+/;
@@ -51,7 +53,27 @@ export const extractFeColorMatrix = (
       console.warn('Invalid value for FeColorMatrix `values` prop');
     }
   }
-  if (props.type) extracted.type = props.type;
+  if (props.type) {
+    extracted.type = props.type;
+  }
+
+  return extracted;
+};
+
+export const extractFeOffset = (
+  props: FeOffsetComponentProps
+): FeOffsetNativeProps => {
+  const extracted: FeOffsetNativeProps = {};
+
+  if (props.in) {
+    extracted.in1 = props.in;
+  }
+  if (props.dx) {
+    extracted.dx = props.dx;
+  }
+  if (props.dy) {
+    extracted.dy = props.dy;
+  }
 
   return extracted;
 };

src/xml.tsx

@@ -28,6 +28,7 @@ import Marker from './elements/Marker';
 import Filter from './elements/filters/Filter';
 import FeColorMatrix from './elements/filters/FeColorMatrix';
 import FeGaussianBlur from './elements/filters/FeGaussianBlur';
+import FeOffset from './elements/filters/FeOffset';
 
 export const tags: { [tag: string]: ComponentType } = {
   svg: Svg,
@@ -56,6 +57,7 @@ export const tags: { [tag: string]: ComponentType } = {
   filter: Filter,
   feColorMatrix: FeColorMatrix,
   feGaussianBlur: FeGaussianBlur,
+  feOffset: FeOffset,
 };
 
 function missingTag() {