mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-06 07:06:11 +00:00
52466a2564
# Summary Provide a **CSS**-like filter API in the `FilterImage` component. Unlike the SVG filter API, which can be complex and challenging even for simple tasks, the CSS API is straightforward and allows users to quickly achieve satisfactory results. The full API can be viewed here https://developer.mozilla.org/en-US/docs/Web/CSS/filter _We support all `<filter-function>` listed in the docs while we do not support functions from `<url>` (`url()` and `src()`)._ All shorthands are implemented according to the W3 standard described here https://www.w3.org/TR/filter-effects-1/#ShorthandEquivalents This PR also changes the `filters` prop behavior as it adds `fe` in front of `name` attribute to not introduce any abstract above that specified in the docs. ```tsx <FilterImage source={myImage} filters={[{ name: 'colorMatrix', type: 'saturate', values: 0.2 }]) /> ``` is now ```tsx <FilterImage source={myImage} filters={[{ name: 'feColorMatrix', type: 'saturate', values: 0.2 }]) /> ``` ## Examples Below are the simple examples of the usage through `StyleSheet` ```tsx import React from 'react'; import {StyleSheet, View} from 'react-native'; import {FilterImage} from 'react-native-svg/filter-image'; export default () => { return ( <FilterImage style={styles.image} source={{ uri: 'https://cdn.pixabay.com/photo/2024/05/26/00/40/lizard-8787888_1280.jpg', }} /> ); }; const styles = StyleSheet.create({ image: { width: 200, height: 200, filter: 'saturate(100) grayscale(100%)', }, }); ``` or directly in the `style` prop ```tsx import React from 'react'; import {StyleSheet, View} from 'react-native'; import {FilterImage} from 'react-native-svg/filter-image'; export default () => { return ( <FilterImage style={{ width: 200, height: 200, filter: 'saturate(100) grayscale(100%)', }} source={{ uri: 'https://cdn.pixabay.com/photo/2024/05/26/00/40/lizard-8787888_1280.jpg', }} /> ); }; ``` ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | Android | ✅ | ## Checklist - [x] I have tested this on a device and a simulator - [x] I added documentation in `README.md` - [x] I updated the typed files (typescript)
129 lines
3.9 KiB
JSON
129 lines
3.9 KiB
JSON
{
|
|
"version": "15.4.0",
|
|
"name": "react-native-svg",
|
|
"description": "SVG library for react-native",
|
|
"homepage": "https://github.com/react-native-community/react-native-svg",
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "https://github.com/react-native-community/react-native-svg"
|
|
},
|
|
"license": "MIT",
|
|
"main": "lib/commonjs/index.js",
|
|
"module": "lib/module/index.js",
|
|
"types": "lib/typescript/index.d.ts",
|
|
"react-native": "src/index.ts",
|
|
"files": [
|
|
"android",
|
|
"apple",
|
|
"common",
|
|
"lib",
|
|
"src",
|
|
"css",
|
|
"filter-image",
|
|
"RNSVG.podspec",
|
|
"!android/build",
|
|
"windows",
|
|
"react-native.config.js"
|
|
],
|
|
"react-native-builder-bob": {
|
|
"source": "src",
|
|
"output": "lib",
|
|
"targets": [
|
|
"commonjs",
|
|
"module",
|
|
"typescript"
|
|
]
|
|
},
|
|
"keywords": [
|
|
"react-component",
|
|
"react-native",
|
|
"ios",
|
|
"android",
|
|
"windows",
|
|
"SVG",
|
|
"ART",
|
|
"VML",
|
|
"gradient"
|
|
],
|
|
"scripts": {
|
|
"bob": "bob build",
|
|
"format": "yarn format-js && yarn format-ios && yarn format-java",
|
|
"format-ios": "find apple/ common/ -iname *.h -o -iname *.m -o -iname *.cpp -o -iname *.mm | xargs clang-format -i",
|
|
"format-java": "node ./scripts/format-java.js",
|
|
"format-js": "prettier --write README.md CONTRIBUTING.md CODE_OF_CONDUCT.md USAGE.md ./src/**/*.{ts,tsx} ./apps/**/*.tsx ./example/**/*.tsx ./*-example/**/*.tsx",
|
|
"jest": "jest",
|
|
"lint": "eslint --ext .ts,.tsx src",
|
|
"peg": "pegjs -o src/lib/extract/transform.js ./src/lib/extract/transform.peg && peggy -o src/filter-image/extract/extractFiltersString.js src/filter-image/extract/extractFiltersString.pegjs",
|
|
"prepare": "npm run bob && husky install",
|
|
"release": "npm login && release-it",
|
|
"test": "npm run lint && npm run tsc",
|
|
"tsc": "tsc --noEmit",
|
|
"check-archs-consistency": "node ./scripts/codegen-check-consistency.js",
|
|
"sync-archs": "node ./scripts/codegen-sync-archs.js"
|
|
},
|
|
"peerDependencies": {
|
|
"react": "*",
|
|
"react-native": "*"
|
|
},
|
|
"dependencies": {
|
|
"css-select": "^5.1.0",
|
|
"css-tree": "^1.1.3",
|
|
"warn-once": "0.1.1"
|
|
},
|
|
"devDependencies": {
|
|
"@react-native-community/eslint-config": "^3.0.2",
|
|
"@react-native-community/eslint-plugin": "^1.2.0",
|
|
"@react-native/babel-plugin-codegen": "^0.71.0",
|
|
"@react-native/eslint-config": "^0.72.2",
|
|
"@types/css-tree": "^1.0.3",
|
|
"@types/jest": "^27.5.2",
|
|
"@types/node": "*",
|
|
"@types/react": "^18.2.18",
|
|
"@typescript-eslint/eslint-plugin": "^5.11.0",
|
|
"@typescript-eslint/parser": "^5.11.0",
|
|
"babel-eslint": "^10.1.0",
|
|
"babel-jest": "^28.1.0",
|
|
"babel-plugin-module-resolver": "^5.0.0",
|
|
"clang-format": "^1.8.0",
|
|
"eslint": "^8.44.0",
|
|
"eslint-config-prettier": "^8.3.0",
|
|
"eslint-config-standard": "^17.0.0",
|
|
"eslint-import-resolver-babel-module": "^5.3.2",
|
|
"eslint-plugin-import": "^2.25.4",
|
|
"eslint-plugin-n": "^16.0.0",
|
|
"eslint-plugin-promise": "^6.1.1",
|
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
"eslint-plugin-standard": "^5.0.0",
|
|
"husky": "^8.0.1",
|
|
"jest": "^28.1.0",
|
|
"lint-staged": "^13.0.3",
|
|
"peggy": "4.0.3",
|
|
"pegjs": "^0.10.0",
|
|
"prettier": "3.0.1",
|
|
"react": "^18.2.0",
|
|
"react-native": "^0.72.3",
|
|
"react-native-builder-bob": "^0.20.4",
|
|
"react-native-windows": "^0.72.4",
|
|
"react-test-renderer": "^18.2.0",
|
|
"release-it": "^14.12.5",
|
|
"ts-node": "^10.8.0",
|
|
"typescript": "^5.1.6"
|
|
},
|
|
"lint-staged": {
|
|
"{src,Example}/**/*.{js,ts,tsx}": "yarn format-js",
|
|
"src/**/*.{js,ts,tsx}": "yarn lint",
|
|
"apple/**/*.{h,m,mm,cpp}": "yarn format-ios",
|
|
"android/src/**/*.java": "yarn format-java",
|
|
"src/fabric/*.ts": "yarn sync-archs"
|
|
},
|
|
"nativePackage": true,
|
|
"codegenConfig": {
|
|
"name": "rnsvg",
|
|
"type": "all",
|
|
"jsSrcsDir": "./src/fabric",
|
|
"android": {
|
|
"javaPackageName": "com.horcrux.svg"
|
|
}
|
|
}
|
|
}
|