react-native-image-filter-kit
Various image filters for iOS & Android.
Status
- iOS & Android:
- filter components work as combinable wrappers for standard
Image
and ImageBackground
components
- resulting images are being cached in memory and can be
extracted into temporary files of original resolution
- additional filters can be developed as separate modules
-
react-native:
react-native |
min Android SDK |
min iOS version |
>=0.64.0 |
21 |
9.0 |
>=0.57.1 <0.64.0 |
17 |
9.0 |
Installation
with react-native ">=0.64.0"
### 1. Install latest version from npm
`$ npm i react-native-image-filter-kit -S`
### 2. Install pods
`$ cd ios && pod install && cd ..`
### 3. Add ProGuard rules
- Add ProGuard rules to `android/app/proguard-rules.pro`:
```
# react-native-image-filter-kit
-keep class com.facebook.react.views.image.** { *; }
-keep class com.facebook.drawee.** { *; }
```
Thanks @NikitaDudin for [pointing this out](/../../issues/89)!
|
with react-native ">=0.61.0 <0.64.0"
### 1. Install v0.7.3 from npm
`$ npm i react-native-image-filter-kit@0.7.3 -S`
### 2. Install pods
`$ cd ios && pod install && cd ..`
### 3. Enable renderscript
- Modify `android/build.gradle`:
```diff
buildscript {
ext {
- buildToolsVersion = "28.0.3"
- minSdkVersion = 16
- compileSdkVersion = 28
- targetSdkVersion = 28
+ buildToolsVersion = "29.0.3"
+ minSdkVersion = 17
+ compileSdkVersion = 29
+ targetSdkVersion = 29
+ renderscriptVersion = 21
...
dependencies {
- classpath("com.android.tools.build:gradle:3.4.2")
+ classpath("com.android.tools.build:gradle:3.6.0")
```
- Modify `android/app/build.gradle`:
```diff
android {
compileSdkVersion rootProject.ext.compileSdkVersion
+ buildToolsVersion rootProject.ext.buildToolsVersion
...
defaultConfig {
...
+ renderscriptTargetApi rootProject.ext.renderscriptVersion
+ renderscriptSupportModeEnabled true
}
```
- Modify `android/gradle/wrapper/gradle-wrapper.properties`:
```diff
- distributionUrl=https\://services.gradle.org/distributions/gradle-5.5-all.zip
+ distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
```
|
with react-native ">=0.60.0 <0.61.0"
### 1. Install v0.5.18 from npm
`$ npm i react-native-image-filter-kit@0.5.18 -S`
### 2. Install pods
`$ cd ios && pod install && cd ..`
### 3. Enable renderscript
- Modify `android/build.gradle`:
```diff
buildscript {
ext {
- buildToolsVersion = "28.0.3"
- minSdkVersion = 16
- compileSdkVersion = 28
- targetSdkVersion = 28
+ buildToolsVersion = "29.0.3"
+ minSdkVersion = 17
+ compileSdkVersion = 29
+ targetSdkVersion = 29
...
dependencies {
- classpath("com.android.tools.build:gradle:3.4.2")
+ classpath("com.android.tools.build:gradle:3.6.0")
...
allprojects {
repositories {
...
+ maven { url 'https://jitpack.io' }
}
}
```
- Modify `android/app/build.gradle`:
```diff
android {
compileSdkVersion rootProject.ext.compileSdkVersion
+ buildToolsVersion rootProject.ext.buildToolsVersion
...
defaultConfig {
...
+ renderscriptTargetApi 21
+ renderscriptSupportModeEnabled true
}
```
- Modify `android/gradle/wrapper/gradle-wrapper.properties`:
```diff
- distributionUrl=https\://services.gradle.org/distributions/gradle-5.5-all.zip
+ distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
```
|
with react-native ">=0.58.0 <0.60.0"
### 1. Install v0.4.14 from npm
`$ npm i react-native-image-filter-kit@0.4.14 -S`
### 2-a. Link native modules
`$ react-native link react-native-image-filter-kit`
### 2-b. Install pods
If you use Cocoapods add the following line to your Podfile:
```sh
pod 'React', :path => '../node_modules/react-native'
pod 'RNImageFilterKit', :path => '../node_modules/react-native-image-filter-kit'
```
`$ cd ios && pod install && cd ..`
### 2-c. Manual installation
Install manually if `react-native link` failed - [link](docs/manual_installation.md)
### 3. Enable renderscript
- Modify `android/build.gradle`:
```diff
buildscript {
ext {
...
- minSdkVersion = 16
+ minSdkVersion = 17
```
- Modify `android/app/build.gradle`:
```diff
defaultConfig {
...
+ renderscriptTargetApi 21
+ renderscriptSupportModeEnabled true
}
```
|
with react-native ">=0.57.1 <0.58.0"
### 1. Install v0.3.9 from npm
`$ npm i react-native-image-filter-kit@0.3.9 -S`
### 2-a. Link native modules
`$ react-native link react-native-image-filter-kit`
### 2-b. Install pods
If you use Cocoapods add the following line to your Podfile:
```sh
pod 'React', :path => '../node_modules/react-native'
pod 'RNImageFilterKit', :path => '../node_modules/react-native-image-filter-kit'
```
`$ cd ios && pod install && cd ..`
### 2-c. Manual installation
Install manually if `react-native link` failed - [link](docs/manual_installation.md)
### 3. Final step
Open `android/build.gradle` and change `minSdkVersion` to 17.
|
Scope
The 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 filters - better use a lightweight predecessor of this module.
Example
import { Image } from 'react-native'
import {
SoftLightBlend,
Emboss,
Earlybird,
Invert,
RadialGradient
} from 'react-native-image-filter-kit'
const result = (
<Earlybird
image={
<SoftLightBlend
resizeCanvasTo={'dstImage'}
dstTransform={{
scale: 'CONTAIN'
}}
dstImage={
<Emboss
image={
<Image
style={{ width: 320, height: 320 }}
source={require('./parrot.png')}
resizeMode={'contain'}
/>
}
/>
}
srcTransform={{
anchor: { x: 0.5, y: 1 },
translate: { x: 0.5, y: 1 }
}}
srcImage={
<Invert
image={
<RadialGradient
colors={['rgba(0, 0, 255, 1)', '#00ff00', 'red']}
stops={[0.25, 0.75, 1]}
center={{ x: '50w', y: '100h' }}
/>
}
/>
}
/>
}
/>
)
original image |
result |
|
|
filter steps
original image |
|
|
Emboss |
|
|
SoftLightBlend |
|
|
Earlybird |
|
|
RadialGradient |
|
|
Invert |
|
|
Reference
Caveats
-
blurRadius
Image prop will not work in conjunction with this library, instead of it just use BoxBlur filter
-
When running on pre-Lollipop (SDK < 21) Android devices you may experience TooManyBitmapsException, which results in image is not being rendered (this can be logged with onFilteringError 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:
- using smaller images
- using ColorMatrix filter with concatColorMatrices instead of wrapping the image with multiple color matrix based filters
- adding
android:largeHeap="true"
to android/app/src/main/AndroidManifest.xml
- replacing standard
MainReactPackage
with alternative one provided by this module:
...
+ import iyegoroff.imagefilterkit.MainReactPackageWithFrescoCache;
public class MainApplication extends Application implements ReactApplication {
...
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
- return packages;
+ return MainReactPackageWithFrescoCache.inject(packages);
}
...
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 prop.
-
If you are using react-native-asset
with "<=0.4.14" 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
Credits