feat: filters support FeColorMatrix and FilterImage

[jakex7]

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: Shadows, filters plans #150, Element drop shadow / blur #176, Shadow solution #635, react-native-svg feDropShadows support #883, Possible to use image as clipPath? #994, Shadow issues when using path #996, Feature: filter, feFlood and feBlend #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

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>
  );
};

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

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,
  },
});

Test Plan

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

Compatibility

OS	Implemented
iOS	✅
Android	✅

Checklist

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

[WoLewicki]

Leaving some comments for now.

[WoLewicki]

We could change the name of this image (and others too) to be more descriptive in some follow-up PR.

[WoLewicki]

Ok I finished the review! Great job 🚀 I left some more comments, please answer them.

[WoLewicki]

Shouldn't we import those similar to as we import things from the main package in css:

react-native-svg/src/css/css.tsx

Line 13 in 2514ac4

import { camelCase, fetchText, parse, SvgAst } from 'react-native-svg';

?

[jakex7]

When importing from react-native-svg types seems to be not recognized

[WoLewicki]

That's not good and we should fix it in both places. So if it works, let's leave it like this for now.

[WoLewicki]

Some more comments. When you apply those, I think we are ready for merging!

[WoLewicki]

That's not good and we should fix it in both places. So if it works, let's leave it like this for now.

[WoLewicki]

LGTM!