feat: introduce CSS filter API on FilterImage

[jakex7]

Summary

Provide a CSS-like filter API in the FilterImage component.
Unlike the SVG filter API, which can be complex and challenging even for simple tasks, the CSS API is straightforward and allows users to quickly achieve satisfactory results.

The full API can be viewed here https://developer.mozilla.org/en-US/docs/Web/CSS/filter
We support all <filter-function> listed in the docs while we do not support functions from <url> (url() and src()).

All shorthands are implemented according to the W3 standard described here
https://www.w3.org/TR/filter-effects-1/#ShorthandEquivalents

This PR also changes the filters prop behavior as it adds fe in front of name attribute to not introduce any abstract above that specified in the docs.

<FilterImage
  source={myImage}
  filters={[{ name: 'colorMatrix', type: 'saturate', values: 0.2 }])
/>

is now

<FilterImage
  source={myImage}
  filters={[{ name: 'feColorMatrix', type: 'saturate', values: 0.2 }])
/>

Examples

Below are the simple examples of the usage

through StyleSheet

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

export default () => {
  return (
    <FilterImage
      style={styles.image}
      source={{
        uri: 'https://cdn.pixabay.com/photo/2024/05/26/00/40/lizard-8787888_1280.jpg',
      }}
    />
  );
};
const styles = StyleSheet.create({
  image: {
    width: 200,
    height: 200,
    filter: 'saturate(100) grayscale(100%)',
  },
});

or directly in the style prop

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

export default () => {
  return (
    <FilterImage
      style={{
        width: 200,
        height: 200,
        filter: 'saturate(100) grayscale(100%)',
      }}
      source={{
        uri: 'https://cdn.pixabay.com/photo/2024/05/26/00/40/lizard-8787888_1280.jpg',
      }}
    />
  );
};

Compatibility

OS	Implemented
iOS	✅
Android	✅

Checklist

• I have tested this on a device and a simulator
• I added documentation in README.md
• I updated the typed files (typescript)

[WoLewicki]

Left some comments, please answer them

[WoLewicki]

LGTM!