mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-06 07:06:11 +00:00
08e92074b4
# 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)
47 lines
1.6 KiB
JavaScript
47 lines
1.6 KiB
JavaScript
let supportsCodegenConfig = false;
|
|
try {
|
|
const rnCliAndroidVersion =
|
|
require('@react-native-community/cli-platform-android/package.json').version;
|
|
const [major] = rnCliAndroidVersion.split('.');
|
|
supportsCodegenConfig = major >= 9;
|
|
} catch (e) {
|
|
// ignore
|
|
}
|
|
|
|
module.exports = {
|
|
dependency: {
|
|
platforms: {
|
|
android: supportsCodegenConfig
|
|
? {
|
|
componentDescriptors: [
|
|
'RNSVGCircleComponentDescriptor',
|
|
'RNSVGClipPathComponentDescriptor',
|
|
'RNSVGDefsComponentDescriptor',
|
|
'RNSVGFeColorMatrixComponentDescriptor',
|
|
'RNSVGFilterComponentDescriptor',
|
|
'RNSVGEllipseComponentDescriptor',
|
|
'RNSVGForeignObjectComponentDescriptor',
|
|
'RNSVGGroupComponentDescriptor',
|
|
'RNSVGImageComponentDescriptor',
|
|
'RNSVGLinearGradientComponentDescriptor',
|
|
'RNSVGLineComponentDescriptor',
|
|
'RNSVGMarkerComponentDescriptor',
|
|
'RNSVGMaskComponentDescriptor',
|
|
'RNSVGPathComponentDescriptor',
|
|
'RNSVGPatternComponentDescriptor',
|
|
'RNSVGRadialGradientComponentDescriptor',
|
|
'RNSVGRectComponentDescriptor',
|
|
'RNSVGSvgViewAndroidComponentDescriptor',
|
|
'RNSVGSymbolComponentDescriptor',
|
|
'RNSVGTextComponentDescriptor',
|
|
'RNSVGTextPathComponentDescriptor',
|
|
'RNSVGTSpanComponentDescriptor',
|
|
'RNSVGUseComponentDescriptor',
|
|
],
|
|
cmakeListsPath: '../android/src/main/jni/CMakeLists.txt',
|
|
}
|
|
: {},
|
|
},
|
|
},
|
|
};
|