Code Monkey home page Code Monkey logo

react-native-image-filter-kit's Introduction

react-native-image-filter-kit

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

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:

    • supported versions:

      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!

with react-native ">=0.61.0 <0.64.0"

1. Install v0.7.3 from npm

$ npm i [email protected] -S

2. Install pods

$ cd ios && pod install && cd ..

3. Enable renderscript

  • Modify android/build.gradle:

    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:

    android {
      compileSdkVersion rootProject.ext.compileSdkVersion
    + buildToolsVersion rootProject.ext.buildToolsVersion
    
      ...
    
      defaultConfig {
        ...
    +   renderscriptTargetApi rootProject.ext.renderscriptVersion
    +   renderscriptSupportModeEnabled true
      }
  • Modify android/gradle/wrapper/gradle-wrapper.properties:

    - 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:

    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:

    android {
      compileSdkVersion rootProject.ext.compileSdkVersion
    + buildToolsVersion rootProject.ext.buildToolsVersion
    
      ...
    
      defaultConfig {
        ...
    +   renderscriptTargetApi 21
    +   renderscriptSupportModeEnabled true
      }
  • Modify android/gradle/wrapper/gradle-wrapper.properties:

    - 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:

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

3. Enable renderscript

  • Modify android/build.gradle:

    buildscript {
      ext {
        ...
    -   minSdkVersion = 16
    +   minSdkVersion = 17
  • Modify android/app/build.gradle:

    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:

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.