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)

USAGE.md

@@ -1252,3 +1252,84 @@ const styles = StyleSheet.create({
   },
 });
 ```
+
+## Filters
+
+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:
+
+- FeColorMatrix
+
+\*_More filters are coming soon_
+
+Exmaple use of filters:
+
+```jsx
+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>
+  );
+};
+```
+
+![FeColorMatrix](./screenshots/feColorMatrix.png)
+
+More info: <https://www.w3.org/TR/SVG11/filters.html>
+
+## FilterImage
+
+`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,
+  },
+});
+```
+
+![FilterImage](./screenshots/filterImage.png)