Filters progress

[jakex7]

Hi everyone!
We've been working on implementing filters in react-native-svg for a while now. This update is intended to inform you about our progress and facilitate discussion on implementation and future plans.

Progress

Here is a list of the filters along with annotations on their current status:

Filter component

• Filter component feat: filters support FeColorMatrix and FilterImage #2316 [released]
  • x, y, width, height, filterUnits, primitiveUnits [todo]
• FilterPrimitive feat: filters support FeColorMatrix and FilterImage #2316 [released]
• filter prop on renderable elements feat: filters support FeColorMatrix and FilterImage #2316 [released]

Filters

• FeColorMatrix feat: filters support FeColorMatrix and FilterImage #2316 [released]
• FeGaussianBlur feat: add FeGaussianBlur filter #2352 [released]
• FeOffset feat: add FeOffset filter #2361 [released]
• FeMerge, FeMergeNode feat: add FeMerge and FeMergeNode filters #2369 [released]
• FeFlood feat: FeFlood #2487 [released]
• FeBlend feat: FeBlend #2489 [released]
• FeComposite feat: FeComposite filter #2433 [released]
• FeDropShadow feat: FeDropShadow #2514 [released]
• FeComponentTransfer [work in progress]
  • FeFuncR
  • FeFuncG
  • FeFuncB
  • FeFuncA

Example usage

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

This issue is the successor to #150 and address the #176 #635 #883 #1216