feat: filters support FeColorMatrix and FilterImage (#2316)

# Summary

Introducing the long-awaited **Filters** in `react-native-svg` 🎉

### Motivation

This PR is the beginning of bringing support of SVG Filters into
`react-native-svg`.

* **related issues**: This PR series will address the following issues:
#150, #176, #635, #883, #994, #996, #1216
* **feature overview**: This PR is a boilerplate for Filters
   * introducing `Filter` component and `FeColorMatrix` as a start. 
* It also introduces a new subdirectory called
`react-native-svg/filter-image` with a `FilterImage` component.

# Usage

## Filter and Fe...

Filters are compatible with the web familiar standard, so most things
should be compatible out-of-the-box and changes will be limited to using
a capital letter as it's component.

### Example

```tsx
import React from 'react';
import { FeColorMatrix, Filter, Rect, Svg } from 'react-native-svg';

export default () => {
  return (
    <Svg height="300" width="300">
      <Filter id="myFilter">
        <FeColorMatrix type="saturate" values="0.2" />
      </Filter>
      <Rect
        x="0"
        y="0"
        width="300"
        height="300"
        fill="red"
        filter="url(#myFilter)"
      />
    </Svg>
  );
};
```

![image](https://github.com/software-mansion/react-native-svg/assets/39670088/c36fb238-95f4-455d-b0aa-2a7d4038b828)

## Filter Image

`FilterImage` is a new component that is not strictly related to SVG.
Its behavior should be the same as a regular `Image` component from
React Native with one exception - the additional prop `filters`, which
accepts an array of filters to apply to the image.

### Example

```tsx
import React from 'react';
import { StyleSheet } from 'react-native';
import { FilterImage } from 'react-native-svg/filter-image';

const myImage = require('./myImage.jpg');

export default () => {
  return (
    <FilterImage
      style={styles.image}
      source={myImage}
      filters={[
        { name: 'colorMatrix', type: 'saturate', values: 0.2 },
        {
          name: 'colorMatrix',
          type: 'matrix',
          values: [
            0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0,
            0, 1, 0,
          ],
        },
      ]}
    />
  );
};
const styles = StyleSheet.create({
  image: {
    width: 200,
    height: 200,
  },
});
```


![image](https://github.com/software-mansion/react-native-svg/assets/39670088/666ed89f-68d8-491b-b97f-1eef112b7095)

## Test Plan

**Example App**: Updated the example app with various filter effects,
showcasing real-world usage.

## Compatibility

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

## Checklist

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

apple/ViewManagers/RNSVGFeColorMatrixManager.h

@@ -0,0 +1,5 @@
+#import "RNSVGFilterPrimitiveManager.h"
+
+@interface RNSVGFeColorMatrixManager : RNSVGFilterPrimitiveManager
+
+@end

apple/ViewManagers/RNSVGFeColorMatrixManager.mm

@@ -0,0 +1,18 @@
+#import "RNSVGFeColorMatrixManager.h"
+#import "RNSVGColorMatrixType.h"
+#import "RNSVGFeColorMatrix.h"
+
+@implementation RNSVGFeColorMatrixManager
+
+RCT_EXPORT_MODULE()
+
+- (RNSVGFeColorMatrix *)node
+{
+  return [RNSVGFeColorMatrix new];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(in1, NSString)
+RCT_EXPORT_VIEW_PROPERTY(type, RNSVGColorMatrixType)
+RCT_EXPORT_VIEW_PROPERTY(values, NSArray<NSNumber *>)
+
+@end

apple/ViewManagers/RNSVGFilterManager.h

@@ -0,0 +1,5 @@
+#import "RNSVGNodeManager.h"
+
+@interface RNSVGFilterManager : RNSVGNodeManager
+
+@end

apple/ViewManagers/RNSVGFilterManager.mm

@@ -0,0 +1,26 @@
+#import "RNSVGFilterManager.h"
+#import "RNSVGFilter.h"
+
+@implementation RNSVGFilterManager
+
+RCT_EXPORT_MODULE()
+
+- (RNSVGFilter *)node
+{
+  return [RNSVGFilter new];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(x, RNSVGLength *)
+RCT_EXPORT_VIEW_PROPERTY(y, RNSVGLength *)
+RCT_CUSTOM_VIEW_PROPERTY(width, id, RNSVGFilter)
+{
+  view.width = [RCTConvert RNSVGLength:json];
+}
+RCT_CUSTOM_VIEW_PROPERTY(height, id, RNSVGFilter)
+{
+  view.height = [RCTConvert RNSVGLength:json];
+}
+RCT_EXPORT_VIEW_PROPERTY(filterUnits, RNSVGUnits)
+RCT_EXPORT_VIEW_PROPERTY(primitiveUnits, RNSVGUnits)
+
+@end

apple/ViewManagers/RNSVGFilterPrimitiveManager.h

@@ -0,0 +1,5 @@
+#import "RNSVGNodeManager.h"
+
+@interface RNSVGFilterPrimitiveManager : RNSVGNodeManager
+
+@end

apple/ViewManagers/RNSVGFilterPrimitiveManager.mm

@@ -0,0 +1,25 @@
+#import "RNSVGFilterPrimitiveManager.h"
+#import "RNSVGFilterPrimitive.h"
+
+@implementation RNSVGFilterPrimitiveManager
+
+RCT_EXPORT_MODULE()
+
+- (RNSVGFilterPrimitive *)node
+{
+  return [RNSVGFilterPrimitive new];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(x, RNSVGLength *)
+RCT_EXPORT_VIEW_PROPERTY(y, RNSVGLength *)
+RCT_CUSTOM_VIEW_PROPERTY(width, id, RNSVGFilterPrimitive)
+{
+  view.width = [RCTConvert RNSVGLength:json];
+}
+RCT_CUSTOM_VIEW_PROPERTY(height, id, RNSVGFilterPrimitive)
+{
+  view.height = [RCTConvert RNSVGLength:json];
+}
+RCT_EXPORT_VIEW_PROPERTY(result, NSString)
+
+@end

apple/ViewManagers/RNSVGRenderableManager.mm

@@ -37,5 +37,6 @@ RCT_EXPORT_VIEW_PROPERTY(strokeDashoffset, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(strokeMiterlimit, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(vectorEffect, int)
 RCT_EXPORT_VIEW_PROPERTY(propList, NSArray<NSString *>)
+RCT_EXPORT_VIEW_PROPERTY(filter, NSString)
 
 @end