# 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>
);
};
```
## 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,
},
});
```
## 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)
# Summary
PR bringing proper support for react-native-reanimated in the library by using dynamics instead of strings for props that can be either string or number.
React Native no longer allows implicit copying of Props, since they're large data-structures and copies are often accidental (bbc517c8c8). This updates react-native-svg to be compatible with this change, and will provide a small perf win.
PR removing methods that seem unnecessary for the accessibility props since they are provided by superclasses. It was necessary to update fabric updateProps method though, since we don't call super there. Also added proper type definitions and removed unnecessary casts.
PR adding proper handling of pointerEvents in the library. Based on the comment by @RSNara :
> For all Android components, static ViewConfigs are generated from the components types + BaseVIewConfig.android.js. The BaseViewConfig for all android components is facebook/react-native@c5217f1/Libraries/NativeComponent/BaseViewConfig.android.js#L288-L297, which doesn't contain the pointerEvents validAttribute. So, React Native SVG components must re-declare the pointerEvents validAttribute. Otherwise, the pointerEvents validAttribute won't be in the static ViewConfig, which means React won't pass that prop to native with Static ViewConfigs.
We needed a way to trick codegen since we added our own pointerEvents with string type, and such prop is already present in ViewProps from react-native, but as a union of strings, so their types did not match. As codegen parses string literals, we include changed ViewProps type, without pointerEvents prop, so we satisfy both codegen and TS.
As for how pointerEvents are handled now:
iOS:
Paper: prop is passed in RCTViewManager but it looks like it does not matter what you pass there, since even if you set none, resulting in view.userInteractionEnabled = NO; (facebook/react-native@065db68/React/Views/RCTViewManager.m#L256), custom implementation of hitTest will not take it into account anyhow.
Fabric: we don’t use pointerEvents prop but it is not a problem since it is not used in the implementation of neither SvgView and RCTViewComponentView (it is used in hitTest method there, but we override it)
Android:
Paper: the prop was passed through ReactViewManager and was set on the view directly. But the setter for pointerEvents is not visible outside of ReactViewGroup . After adding Fabric integration for both platforms: BaseViewManager does not implement setter for pointerEvents so we have to add the prop by ourselves. Still, we cannot call the setter from ReactViewGroup since it is not visible, so all the logic for pointerEvents should be migrated to SvgView unfortunately or we should use reflection to get that method.
Despite that, it seems that behavior differs on Android and iOS since setting pointerEvents to none on Android makes the view not clickable, whereas on iOS it does not change anything.
PR transfering Fabric specs to TS, removing unnecessary @ReactProp adnotations, unifying inheritance hierarchy across platforms, adding custom types for color and image source props so they are parsed by react-native.
Version of #1754 without usage of ComponentViews. It seems like a more proper way, but introduces the necessity of clearing whole state of each component on recycling for it not to be used when view is recycled.
Still known problems:
We stringify props of type NumberProp since codegen only accepts props of a single type. It is the fastest way of dealing with it, but maybe there could be a better way to handle it.
Image resolving should be probably handled the same as in RN core
SvgView needs to set opaque = NO so it is does not have black background (it comes from the fact that RCTViewComponentView overrides backgroundColor setter which in turn somehow messes with the view being opaque). All other svg components do it already so maybe it is not such an issue.
transform prop won't work when set natively since it is not parsed in Fabric
