{"id":25344780,"url":"https://github.com/iyegoroff/react-native-image-filter-kit","last_synced_at":"2025-10-24T00:39:17.264Z","repository":{"id":33008008,"uuid":"149519847","full_name":"iyegoroff/react-native-image-filter-kit","owner":"iyegoroff","description":"Various image filters for iOS \u0026 Android","archived":false,"fork":false,"pushed_at":"2023-01-07T04:46:13.000Z","size":9138,"stargazers_count":326,"open_issues_count":67,"forks_count":43,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-19T13:46:35.679Z","etag":null,"topics":["cssgram","image-effects","image-filters","image-mask","react-native"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iyegoroff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-19T22:35:31.000Z","updated_at":"2025-02-11T15:50:45.000Z","dependencies_parsed_at":"2023-01-14T23:15:28.413Z","dependency_job_id":null,"html_url":"https://github.com/iyegoroff/react-native-image-filter-kit","commit_stats":null,"previous_names":[],"tags_count":69,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iyegoroff%2Freact-native-image-filter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iyegoroff%2Freact-native-image-filter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iyegoroff%2Freact-native-image-filter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iyegoroff%2Freact-native-image-filter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iyegoroff","download_url":"https://codeload.github.com/iyegoroff/react-native-image-filter-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135142,"owners_count":20889420,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cssgram","image-effects","image-filters","image-mask","react-native"],"created_at":"2025-02-14T11:51:18.666Z","updated_at":"2025-10-24T00:39:17.172Z","avatar_url":"https://github.com/iyegoroff.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-image-filter-kit\n\n[![npm version](https://badge.fury.io/js/react-native-image-filter-kit.svg)](https://badge.fury.io/js/react-native-image-filter-kit)\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](https://github.com/standard/standard)\n[![Dependency Status](https://david-dm.org/iyegoroff/react-native-image-filter-kit.svg)](https://david-dm.org/iyegoroff/react-native-image-filter-kit)\n[![devDependencies Status](https://david-dm.org/iyegoroff/react-native-image-filter-kit/dev-status.svg)](https://david-dm.org/iyegoroff/react-native-image-filter-kit?type=dev)\n[![typings included](https://img.shields.io/badge/typings-included-brightgreen.svg?t=1495378566925)](src/typings/index.d.ts)\n[![npm](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/react-native-image-filter-kit)\n\n\u003c!-- [![CircleCI](https://circleci.com/gh/iyegoroff/react-native-image-filter-kit.svg?style=svg)](https://circleci.com/gh/iyegoroff/react-native-image-filter-kit) --\u003e\n\nVarious image filters for iOS \u0026 Android.\n\n## Status\n\n- iOS \u0026 Android:\n  - filter components work as combinable wrappers for standard `Image` and `ImageBackground` components\n  - resulting images are being cached in memory and can be\n    [extracted into temporary files](docs/image_extraction.md) of original resolution\n  - [additional filters](https://github.com/iyegoroff/react-native-image-filter-kit/tree/master/examples) can be developed as separate modules\n- react-native:\n\n  - supported versions:\n\n    | react-native     | min Android SDK | min iOS version |\n    | ---------------- | --------------- | --------------- |\n    | \u003e=0.64.0         | 21              | 9.0             |\n    | \u003e=0.57.1 \u003c0.64.0 | 17              | 9.0             |\n\n## Installation\n\n\u003ctable\u003e\n\u003ctd\u003e\n\u003cdetails style=\"border: 1px solid; border-radius: 5px; padding: 5px\"\u003e\n  \u003csummary\u003ewith react-native \"\u003cstrong\u003e\u0026gt;=0.64.0\u003c/strong\u003e\"\u003c/summary\u003e\n\n### 1. Install latest version from npm\n\n`$ npm i react-native-image-filter-kit -S`\n\n### 2. Install pods\n\n`$ cd ios \u0026\u0026 pod install \u0026\u0026 cd ..`\n  \n### 3. Add ProGuard rules\n  \n  - Add ProGuard rules to `android/app/proguard-rules.pro`:\n\n    ```\n    # react-native-image-filter-kit\n    -keep class com.facebook.react.views.image.** { *; }\n    -keep class com.facebook.drawee.** { *; }\n    ```\n    \n    Thanks @NikitaDudin for [pointing this out](/../../issues/89)!\n  \n\n\u003c/details\u003e\n\u003c/td\u003e\n\u003c/table\u003e\n\u003ctable\u003e\n\u003ctd\u003e\n\u003cdetails style=\"border: 1px solid; border-radius: 5px; padding: 5px\"\u003e\n  \u003csummary\u003ewith react-native \"\u003cstrong\u003e\u0026gt;=0.61.0 \u0026lt;0.64.0\u003c/strong\u003e\"\u003c/summary\u003e\n\n### 1. Install v0.7.3 from npm\n\n`$ npm i react-native-image-filter-kit@0.7.3 -S`\n\n### 2. Install pods\n\n`$ cd ios \u0026\u0026 pod install \u0026\u0026 cd ..`\n\n### 3. Enable renderscript\n\n- Modify `android/build.gradle`:\n\n  ```diff\n  buildscript {\n    ext {\n  -   buildToolsVersion = \"28.0.3\"\n  -   minSdkVersion = 16\n  -   compileSdkVersion = 28\n  -   targetSdkVersion = 28\n  +   buildToolsVersion = \"29.0.3\"\n  +   minSdkVersion = 17\n  +   compileSdkVersion = 29\n  +   targetSdkVersion = 29\n  +   renderscriptVersion = 21\n  ...\n\n    dependencies {\n  -   classpath(\"com.android.tools.build:gradle:3.4.2\")\n  +   classpath(\"com.android.tools.build:gradle:3.6.0\")\n  ```\n\n- Modify `android/app/build.gradle`:\n\n  ```diff\n  android {\n    compileSdkVersion rootProject.ext.compileSdkVersion\n  + buildToolsVersion rootProject.ext.buildToolsVersion\n\n    ...\n\n    defaultConfig {\n      ...\n  +   renderscriptTargetApi rootProject.ext.renderscriptVersion\n  +   renderscriptSupportModeEnabled true\n    }\n  ```\n\n- Modify `android/gradle/wrapper/gradle-wrapper.properties`:\n\n  ```diff\n  - distributionUrl=https\\://services.gradle.org/distributions/gradle-5.5-all.zip\n  + distributionUrl=https\\://services.gradle.org/distributions/gradle-6.2-all.zip\n  ```\n\n\u003c/details\u003e\n\u003c/td\u003e\n\u003c/table\u003e\n\u003ctable\u003e\n\u003ctd\u003e\n\u003cdetails style=\"border: 1px solid; border-radius: 5px; padding: 5px\"\u003e\n  \u003csummary\u003ewith react-native \"\u003cstrong\u003e\u0026gt;=0.60.0 \u0026lt;0.61.0\u003c/strong\u003e\"\u003c/summary\u003e\n\n### 1. Install v0.5.18 from npm\n\n`$ npm i react-native-image-filter-kit@0.5.18 -S`\n\n### 2. Install pods\n\n`$ cd ios \u0026\u0026 pod install \u0026\u0026 cd ..`\n\n### 3. Enable renderscript\n\n- Modify `android/build.gradle`:\n\n  ```diff\n  buildscript {\n    ext {\n  -   buildToolsVersion = \"28.0.3\"\n  -   minSdkVersion = 16\n  -   compileSdkVersion = 28\n  -   targetSdkVersion = 28\n  +   buildToolsVersion = \"29.0.3\"\n  +   minSdkVersion = 17\n  +   compileSdkVersion = 29\n  +   targetSdkVersion = 29\n  ...\n\n    dependencies {\n  -   classpath(\"com.android.tools.build:gradle:3.4.2\")\n  +   classpath(\"com.android.tools.build:gradle:3.6.0\")\n  ...\n\n  allprojects {\n    repositories {\n      ...\n  +   maven { url 'https://jitpack.io' }\n    }\n  }\n  ```\n\n- Modify `android/app/build.gradle`:\n\n  ```diff\n  android {\n    compileSdkVersion rootProject.ext.compileSdkVersion\n  + buildToolsVersion rootProject.ext.buildToolsVersion\n\n    ...\n\n    defaultConfig {\n      ...\n  +   renderscriptTargetApi 21\n  +   renderscriptSupportModeEnabled true\n    }\n  ```\n\n- Modify `android/gradle/wrapper/gradle-wrapper.properties`:\n\n  ```diff\n  - distributionUrl=https\\://services.gradle.org/distributions/gradle-5.5-all.zip\n  + distributionUrl=https\\://services.gradle.org/distributions/gradle-6.2-all.zip\n  ```\n\n\u003c/details\u003e\n\u003c/td\u003e\n\u003c/table\u003e\n\u003ctable\u003e\n\u003ctd\u003e\n\u003cdetails style=\"border: 1px solid; border-radius: 5px; padding: 5px\"\u003e\n  \u003csummary\u003ewith react-native \"\u003cstrong\u003e\u0026gt;=0.58.0 \u0026lt;0.60.0\u003c/strong\u003e\"\u003c/summary\u003e\n\n### 1. Install v0.4.14 from npm\n\n`$ npm i react-native-image-filter-kit@0.4.14 -S`\n\n### 2-a. Link native modules\n\n`$ react-native link react-native-image-filter-kit`\n\n### 2-b. Install pods\n\nIf you use Cocoapods add the following line to your Podfile:\n\n```sh\npod 'React', :path =\u003e '../node_modules/react-native'\npod 'RNImageFilterKit', :path =\u003e '../node_modules/react-native-image-filter-kit'\n```\n\n`$ cd ios \u0026\u0026 pod install \u0026\u0026 cd ..`\n\n### 2-c. Manual installation\n\nInstall manually if `react-native link` failed - [link](docs/manual_installation.md)\n\n### 3. Enable renderscript\n\n- Modify `android/build.gradle`:\n  ```diff\n  buildscript {\n    ext {\n      ...\n  -   minSdkVersion = 16\n  +   minSdkVersion = 17\n  ```\n- Modify `android/app/build.gradle`:\n\n  ```diff\n  defaultConfig {\n    ...\n  + renderscriptTargetApi 21\n  + renderscriptSupportModeEnabled true\n  }\n  ```\n\n\u003c/details\u003e\n\u003c/td\u003e\n\u003c/table\u003e\n\u003ctable\u003e\n\u003ctd\u003e\n\u003cdetails style=\"border: 1px solid; border-radius: 5px; padding: 5px\"\u003e\n  \u003csummary\u003ewith react-native \"\u003cstrong\u003e\u0026gt;=0.57.1 \u0026lt;0.58.0\u003c/strong\u003e\"\u003c/summary\u003e\n\n### 1. Install v0.3.9 from npm\n\n`$ npm i react-native-image-filter-kit@0.3.9 -S`\n\n### 2-a. Link native modules\n\n`$ react-native link react-native-image-filter-kit`\n\n### 2-b. Install pods\n\nIf you use Cocoapods add the following line to your Podfile:\n\n```sh\npod 'React', :path =\u003e '../node_modules/react-native'\npod 'RNImageFilterKit', :path =\u003e '../node_modules/react-native-image-filter-kit'\n```\n\n`$ cd ios \u0026\u0026 pod install \u0026\u0026 cd ..`\n\n### 2-c. Manual installation\n\nInstall manually if `react-native link` failed - [link](docs/manual_installation.md)\n\n### 3. Final step\n\nOpen `android/build.gradle` and change `minSdkVersion` to 17.\n\n\u003c/details\u003e\n\u003c/td\u003e\n\u003c/table\u003e\n\n## Scope\n\nThe purpose of this module is to support most of the native image filters on each platform and to provide a common interface for these filters. If the filter exists only on one platform, then its counterpart will be implemented using `renderscript` on Android and `cikernel` on iOS. If you need only [color matrix](docs/color_matrix_filters.md) filters - better use a [lightweight predecessor](https://github.com/iyegoroff/react-native-color-matrix-image-filters) of this module.\n\n## Example\n\n```javascript\nimport { Image } from 'react-native'\nimport {\n  SoftLightBlend,\n  Emboss,\n  Earlybird,\n  Invert,\n  RadialGradient\n} from 'react-native-image-filter-kit'\n\nconst result = (\n  \u003cEarlybird\n    image={\n      \u003cSoftLightBlend\n        resizeCanvasTo={'dstImage'}\n        dstTransform={{\n          scale: 'CONTAIN'\n        }}\n        dstImage={\n          \u003cEmboss\n            image={\n              \u003cImage\n                style={{ width: 320, height: 320 }}\n                source={require('./parrot.png')}\n                resizeMode={'contain'}\n              /\u003e\n            }\n          /\u003e\n        }\n        srcTransform={{\n          anchor: { x: 0.5, y: 1 },\n          translate: { x: 0.5, y: 1 }\n        }}\n        srcImage={\n          \u003cInvert\n            image={\n              \u003cRadialGradient\n                colors={['rgba(0, 0, 255, 1)', '#00ff00', 'red']}\n                stops={[0.25, 0.75, 1]}\n                center={{ x: '50w', y: '100h' }}\n              /\u003e\n            }\n          /\u003e\n        }\n      /\u003e\n    }\n  /\u003e\n)\n```\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eoriginal image\u003c/th\u003e\n    \u003cth\u003eresult\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u003cimg src=\"https://raw.githubusercontent.com/iyegoroff/react-native-image-filter-kit/master/img/parrot.png\" align=\"left\" width=\"300\"\u003e\u003c/th\u003e\n    \u003cth\u003e\u003cimg src=\"https://raw.githubusercontent.com/iyegoroff/react-native-image-filter-kit/master/img/earlybird.png\" align=\"left\" width=\"300\"\u003e\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\u0026nbsp;\n\u003cdetails\u003e\n  \u003csummary\u003efilter steps\u003c/summary\u003e\n  \u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      \u003ctable\u003e\n        \u003ctr\u003e\u003cth\u003eoriginal image\u003c/th\u003e\u003c/tr\u003e\n        \u003ctr\u003e\u003cth\u003e\u003cimg src=\"https://raw.githubusercontent.com/iyegoroff/react-native-image-filter-kit/master/img/parrot.png\" align=\"left\" width=\"170\"\u003e\u003c/th\u003e\u003c/tr\u003e\n      \u003c/table\u003e\n    \u003c/th\u003e\n    \u003cth\u003e\n      \u003ctable\u003e\n        \u003ctr\u003e\u003cth\u003eEmboss\u003c/th\u003e\u003c/tr\u003e\n        \u003ctr\u003e\u003cth\u003e\u003cimg src=\"https://raw.githubusercontent.com/iyegoroff/react-native-image-filter-kit/master/img/emboss.png\" align=\"left\" width=\"170\"\u003e\u003c/th\u003e\u003c/tr\u003e\n      \u003c/table\u003e\n    \u003c/th\u003e\n    \u003cth rowspan=\"2\"\u003e\n      \u003ctable\u003e\n        \u003ctr\u003e\u003cth\u003eSoftLightBlend\u003c/th\u003e\u003c/tr\u003e\n        \u003ctr\u003e\u003cth\u003e\u003cimg src=\"https://raw.githubusercontent.com/iyegoroff/react-native-image-filter-kit/master/img/soft_light_blend.png\" align=\"left\" width=\"170\"\u003e\u003c/th\u003e\u003c/tr\u003e\n      \u003c/table\u003e\n    \u003c/th\u003e\n    \u003cth rowspan=\"2\"\u003e\n      \u003ctable\u003e\n        \u003ctr\u003e\u003cth\u003eEarlybird\u003c/th\u003e\u003c/tr\u003e\n        \u003ctr\u003e\u003cth\u003e\u003cimg src=\"https://raw.githubusercontent.com/iyegoroff/react-native-image-filter-kit/master/img/earlybird.png\" align=\"left\" width=\"170\"\u003e\u003c/th\u003e\u003c/tr\u003e\n      \u003c/table\u003e\n    \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ctable\u003e\n        \u003ctr\u003e\u003cth\u003eRadialGradient\u003c/th\u003e\u003c/tr\u003e\n        \u003ctr\u003e\u003cth\u003e\u003cimg src=\"https://raw.githubusercontent.com/iyegoroff/react-native-image-filter-kit/master/img/radial_gradient.png\" align=\"left\" width=\"170\"\u003e\u003c/th\u003e\u003c/tr\u003e\n      \u003c/table\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ctable\u003e\n        \u003ctr\u003e\u003cth\u003eInvert\u003c/th\u003e\u003c/tr\u003e\n        \u003ctr\u003e\u003cth\u003e\u003cimg src=\"https://raw.githubusercontent.com/iyegoroff/react-native-image-filter-kit/master/img/invert.png\" align=\"left\" width=\"170\"\u003e\u003c/th\u003e\u003c/tr\u003e\n      \u003c/table\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c/details\u003e\n\n## Reference\n\n- [Types](docs/types.md)\n- [Functions](docs/functions.md)\n- [Image extraction](docs/image_extraction.md)\n- [Color matrix filters](docs/color_matrix_filters.md)\n- [Blur filters](docs/blur_filters.md)\n- [Convolve matrix filters](docs/convolve_matrix_filters.md)\n- [Generators](docs/generators.md)\n- [Composition filters](docs/composition_filters.md)\n- [Blend filters](docs/blend_filters.md)\n- [CSSGram filters](docs/cssgram_filters.md)\n- [Android-only filters](src/native-platform-filters/shapes.android.ts)\n- [iOS-only filters](src/native-platform-filters/shapes.ios.ts)\n\n## Caveats\n\n- `blurRadius` Image prop will not work in conjunction with this library, instead of it just use [BoxBlur](docs/blur_filters.md#BoxBlur) filter\n- When running on pre-Lollipop (SDK \u003c 21) Android devices you may experience [TooManyBitmapsException](https://frescolib.org/javadoc/reference/com/facebook/imagepipeline/common/TooManyBitmapsException.html), which results in image is not being rendered (this can be logged with [onFilteringError](docs/types.md#ImageFilter) prop). It looks like this is a relatively rare case which arises on low-end devices when filtering wallpaper-sized images (like 1920 × 1080 pixels). The common workarounds are:\n\n  - using smaller images\n  - using [ColorMatrix](docs/color_matrix_filters.md#ColorMatrix) filter with [concatColorMatrices](docs/functions.md#concatColorMatrices) instead of wrapping the image with multiple color matrix based filters\n  - adding `android:largeHeap=\"true\"` to `android/app/src/main/AndroidManifest.xml`\n  - replacing standard `MainReactPackage` with [alternative](android/src/main/java/iyegoroff/imagefilterkit/MainReactPackageWithFrescoCache.java) one provided by this module:\n\n    ```diff\n    ...\n    + import iyegoroff.imagefilterkit.MainReactPackageWithFrescoCache;\n\n      public class MainApplication extends Application implements ReactApplication {\n\n      ...\n          List\u003cReactPackage\u003e packages = new PackageList(this).getPackages();\n          // Packages that cannot be autolinked yet can be added manually here, for example:\n          // packages.add(new MyReactNativePackage());\n    -     return packages;\n    +     return MainReactPackageWithFrescoCache.inject(packages);\n        }\n    ...\n    ```\n\n    After this change `ImageFilter` will not throw `TooManyBitmapsException` immediately and will clear Fresco image caches, trim bitmap pool memory and try to      filter the image again several times until succeed or reach the limit of retries, specified by [clearCachesMaxRetries](docs/types.md#ImageFilter) prop.\n\n\n- If you are using `react-native-asset` with \"\u003cstrong\u003e\u0026lt;=0.4.14\u003c/strong\u003e\" version of this library - switch to `iyegoroff/react-native-asset#with-key`. In order to prevent unlinking of `.cikernel` files provided by `react-native-image-filter-kit` use `react-native-asset` the following way: `npx iyegoroff/react-native-asset#with-key -a YOUR-OWN-ASSETS -k YOUR-APP-ID`\n\n## Credits\n\n- CSSGram filters are taken from [cssgram](https://github.com/una/cssgram) project by @una\n- `EdgeDetection`, `Emboss` and `FuzzyGlass` filters are taken from [android-graphics-demo](https://github.com/chiuki/android-graphics-demo) project by @chiuki\n- Parrot [image](https://commons.wikimedia.org/wiki/File:Ara_macao_-flying_away-8a.jpg) by\n  [Robert01](https://de.wikipedia.org/wiki/Benutzer:Robert01)\n- Blend filters are based on `skia` [sources](https://github.com/google/skia/blob/master/src/gpu/glsl/GrGLSLBlend.cpp)\n- File save functionality is based on [react-native-view-shot](https://github.com/gre/react-native-view-shot) project by @gre\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiyegoroff%2Freact-native-image-filter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiyegoroff%2Freact-native-image-filter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiyegoroff%2Freact-native-image-filter-kit/lists"}