feat: FeFlood (#2487)

# Summary

Continuation of #2362 implementing `FeFlood` filter
https://www.w3.org/TR/SVG11/filters.html#feFloodElement

## Test Plan

Example app → Filters → `FeFlood`

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅      |
| macOS   |    ✅ _*_      |
| Android |    ✅      |
| Web     |    ✅      |

_* `canvasWidth/canvasHeight` is incorrect on macOS, so there might be
some problems_

src/elements/filters/FeFlood.tsx

@@ -1,6 +1,7 @@
-import { ColorValue } from 'react-native';
+import { ColorValue, NativeMethods } from 'react-native';
+import RNSVGFeFlood from '../../fabric/FeFloodNativeComponent';
+import extractFeFlood, { extractFilter } from '../../lib/extract/extractFilter';
 import { NumberProp } from '../../lib/extract/types';
-import { warnUnimplementedFilter } from '../../lib/util';
 import FilterPrimitive from './FilterPrimitive';
 
 export interface FeFloodProps {
@@ -12,12 +13,19 @@ export interface FeFloodProps {
 export default class FeFlood extends FilterPrimitive<FeFloodProps> {
   static displayName = 'FeFlood';
 
-  static defaultProps = {
+  static defaultProps: React.ComponentProps<typeof FeFlood> = {
     ...this.defaultPrimitiveProps,
+    floodColor: 'black',
+    floodOpacity: 1,
   };
 
   render() {
-    warnUnimplementedFilter();
-    return null;
+    return (
+      <RNSVGFeFlood
+        ref={(ref) => this.refMethod(ref as (FeFlood & NativeMethods) | null)}
+        {...extractFilter(this.props)}
+        {...extractFeFlood(this.props)}
+      />
+    );
   }
 }

src/fabric/FeFloodNativeComponent.ts

@@ -0,0 +1,31 @@
+import type { ColorValue } from 'react-native';
+import type {
+  Float,
+  Int32,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { NumberProp } from '../lib/extract/types';
+import type { UnsafeMixed } from './codegenUtils';
+import type { ViewProps } from './utils';
+
+interface FilterPrimitiveCommonProps {
+  x?: UnsafeMixed<NumberProp>;
+  y?: UnsafeMixed<NumberProp>;
+  width?: UnsafeMixed<NumberProp>;
+  height?: UnsafeMixed<NumberProp>;
+  result?: string;
+}
+
+type ColorStruct = Readonly<{
+  type?: WithDefault<Int32, -1>;
+  payload?: ColorValue;
+  brushRef?: string;
+}>;
+
+export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
+  floodColor?: UnsafeMixed<ColorValue | ColorStruct>;
+  floodOpacity?: WithDefault<Float, 1.0>;
+}
+
+export default codegenNativeComponent<NativeProps>('RNSVGFeFlood');

src/fabric/index.ts

@@ -22,6 +22,7 @@ import RNSVGTSpan from './TSpanNativeComponent';
 import RNSVGUse from './UseNativeComponent';
 import RNSVGFilter from './FilterNativeComponent';
 import RNSVGFeColorMatrix from './FeColorMatrixNativeComponent';
+import RNSVGFeFlood from './FeFloodNativeComponent';
 import RNSVGFeGaussianBlur from './FeGaussianBlurNativeComponent';
 import RNSVGFeMerge from './FeMergeNativeComponent';
 import RNSVGFeOffset from './FeOffsetNativeComponent';
@@ -51,6 +52,7 @@ export {
   RNSVGUse,
   RNSVGFilter,
   RNSVGFeColorMatrix,
+  RNSVGFeFlood,
   RNSVGFeGaussianBlur,
   RNSVGFeMerge,
   RNSVGFeOffset,

src/lib/extract/extractFilter.ts

@@ -1,10 +1,15 @@
 import React from 'react';
+import { ColorValue, processColor } from 'react-native';
 import { FeColorMatrixProps as FeColorMatrixComponentProps } from '../../elements/filters/FeColorMatrix';
+import { FeFloodProps as FeFloodComponentProps } from '../../elements/filters/FeFlood';
 import { FeGaussianBlurProps as FeGaussianBlurComponentProps } from '../../elements/filters/FeGaussianBlur';
 import { FeMergeProps as FeMergeComponentProps } from '../../elements/filters/FeMerge';
 import { NativeProps as FeColorMatrixNativeProps } from '../../fabric/FeColorMatrixNativeComponent';
+import { NativeProps as FeFloodNativeProps } from '../../fabric/FeFloodNativeComponent';
 import { NativeProps as FeGaussianBlurNativeProps } from '../../fabric/FeGaussianBlurNativeComponent';
 import { NativeProps as FeMergeNativeProps } from '../../fabric/FeMergeNativeComponent';
+import extractBrush from './extractBrush';
+import extractOpacity from './extractOpacity';
 import { NumberProp } from './types';
 
 const spaceReg = /\s+/;
@@ -67,6 +72,28 @@ export const extractFeColorMatrix = (
   return extracted;
 };
 
+const defaultFill = { type: 0, payload: processColor('black') as ColorValue };
+export default function extractFeFlood(
+  props: FeFloodComponentProps
+): FeFloodNativeProps {
+  const extracted: FeFloodNativeProps = {};
+  const { floodColor, floodOpacity } = props;
+
+  if (floodColor != null) {
+    extracted.floodColor =
+      !floodColor && typeof floodColor !== 'number'
+        ? defaultFill
+        : (extractBrush(floodColor) as unknown as string);
+  } else {
+    // we want the default value of fill to be black to match the spec
+    extracted.floodColor = defaultFill;
+  }
+  if (floodOpacity != null) {
+    extracted.floodOpacity = extractOpacity(floodOpacity);
+  }
+  return extracted;
+}
+
 export const extractFeGaussianBlur = (
   props: FeGaussianBlurComponentProps
 ): FeGaussianBlurNativeProps => {