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)
50 lines
1.1 KiB
JavaScript
50 lines
1.1 KiB
JavaScript
module.exports = {
|
|
root: true,
|
|
parser: '@typescript-eslint/parser',
|
|
extends: [
|
|
'standard',
|
|
'plugin:@typescript-eslint/recommended',
|
|
'prettier',
|
|
'plugin:import/typescript',
|
|
],
|
|
plugins: [
|
|
'react',
|
|
'react-native',
|
|
'import',
|
|
'@typescript-eslint',
|
|
'react-hooks',
|
|
],
|
|
env: {
|
|
'react-native/react-native': true,
|
|
},
|
|
settings: {
|
|
'import/core-modules': [
|
|
'react-native-svg',
|
|
'react-native-svg/css',
|
|
'react-native-svg/filter-image',
|
|
],
|
|
'import/resolver': {
|
|
'babel-module': {
|
|
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
|
},
|
|
},
|
|
},
|
|
rules: {
|
|
'import/no-unresolved': 'error',
|
|
'react/jsx-uses-vars': 'error',
|
|
'react/jsx-uses-react': 'error',
|
|
'no-use-before-define': 'off',
|
|
'@typescript-eslint/ban-ts-comment': [
|
|
'error',
|
|
{
|
|
'ts-ignore': 'allow-with-description',
|
|
'ts-expect-error': 'allow-with-description',
|
|
},
|
|
],
|
|
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
|
|
'@typescript-eslint/no-var-requires': 'warn',
|
|
eqeqeq: 'error',
|
|
'no-unreachable': 'error',
|
|
},
|
|
};
|