react-native-image-filter-kit

npm version CircleCI js-standard-style Dependency Status devDependencies Status typings included npm

Various image filters for iOS & Android.

Status

Installation

with react-native ">=0.61.0" ### 1. Install latest version from npm `$ npm i react-native-image-filter-kit -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 [email protected] -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 [email protected] -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 [email protected] -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

Credits