react-native-color-matrix-image-filters

Various color matrix based image filters for iOS & Android.

Status

• iOS & Android:
  • filter components work as stackable wrappers for Image, ImageBackground and react-native-fast-image components
• react-native:
  • with rn >= 0.56.0 use latest version

Getting started

$ npm install react-native-color-matrix-image-filters --save

Automatic installation

$ react-native link react-native-color-matrix-image-filters

Installation with Cocoapods

If you use Cocoapods add the following line to your Podfile:

pod 'React', :path => '../node_modules/react-native'
pod 'RNColorMatrixImageFilters', :path => '../node_modules/react-native-color-matrix-image-filters'

Manual installation

link

Example

import { Image } from 'react-native';
import {
  Grayscale,
  Sepia,
  Tint,
  ColorMatrix,
  concatColorMatrices,
  invert,
  contrast,
  saturate
} from 'react-native-color-matrix-image-filters';

const GrayscaledImage = (imageProps) => (
  <Grayscale>
    <Image {...imageProps} />
  </Grayscale>
);

const CombinedFiltersImage = (imageProps) => (
  <Tint amount={1.25}>
    <Sepia>
      <Image {...imageProps} />
    </Sepia>
  </Tint>
);

const ColorMatrixImage = (imageProps) => (
  <ColorMatrix
    matrix={concatColorMatrices([saturate(-0.9), contrast(5.2), invert()])}
    // alt: matrix={[saturate(-0.9), contrast(5.2), invert()]}
  >
    <Image {...imageProps} />
  </ColorMatrix>
);

Original | Grayscaled :---------------------------------------------:|:---------------------------------------------: |

CombinedFilters | ColorMatrix :---------------------------------------------:|:---------------------------------------------: |

Usage

Each filter support all of View props. Also some filters have optional amount prop which takes a number. ColorMatrix filter has matrix prop which takes a Matrix - an array of 20 numbers. Additionally library exports functions like grayscale, tint etc. - these functions return values of Matrix type and their results can be combined with concatColorMatrices function. If you need to combine several filters, consider using ColorMatrix with concatColorMatrices - generally it is more performant than corresponding stack of filter components.

Reference

Supported filters

| Component | Additional props | function | | ----------------- | -------------------- | ----------------- | | ColorMatrix | matrix: Matrix | Array<Matrix> | - | Normal | - | normal(): Matrix | RGBA | red: number = 1, green: number = 1, blue: number = 1, alpha: number = 1 | rgba(red: number = 1, green: number = 1, blue: number = 1, alpha: number = 1): Matrix | Saturate | amount: number = 1 | saturate(amount: number = 1): Matrix | HueRotate | amount: number = 0 | hueRotate(amount: number = 0): Matrix | LuminanceToAlpha | - | luminanceToAlpha(): Matrix | Invert | - | invert(): Matrix | Grayscale | amount: number = 1 | grayscale(amount: number = 1): Matrix | Sepia | amount: number = 1 | sepia(amount: number = 1): Matrix | Nightvision | - | nightvision(): Matrix | Warm | - | warm(): Matrix | Cool | - | cool(): Matrix | Brightness | amount: number = 1 | brightness(amount: number = 1): Matrix | Contrast | amount: number = 1 | contrast(amount: number = 1): Matrix | Temperature | amount: number = 1 | temperature(amount: number = 1): Matrix | Tint | amount: number = 0 | tint(amount: number = 0): Matrix | Threshold | amount: number = 0 | threshold(amount: number = 0): Matrix | Technicolor | - | technicolor(): Matrix | Polaroid | - | polaroid(): Matrix | ToBGR | - | toBGR(): Matrix | Kodachrome | - | kodachrome(): Matrix | Browni | - | browni(): Matrix | Vintage | - | vintage(): Matrix | Night | amount: number = 0.1 | night(amount: number = 0.1): Matrix | Predator | amount: number = 1 | predator(amount: number = 1): Matrix | Lsd | - | lsd(): Matrix | ColorTone | desaturation: number = 0.2, toned: number = 0.15, lightColor: string = "#FFE580", darkColor: string = "#338000" | colorTone(desaturation: number = 0.2, toned: number = 0.15, lightColor: string = "#FFE580", darkColor: string = "#338000"): Matrix | DuoTone | firstColor: string = "#FFE580", secondColor: string = "#338000" | duoTone(firstColor: string = "#FFE580", secondColor: string = "#338000"): Matrix | Protanomaly | - | protanomaly(): Matrix | Deuteranomaly | - | deuteranomaly(): Matrix | Tritanomaly | - | tritanomaly(): Matrix | Protanopia | - | protanopia(): Matrix | Deuteranopia | - | deuteranopia(): Matrix | Tritanopia | - | tritanopia(): Matrix | Achromatopsia | - | achromatopsia(): Matrix | Achromatomaly | - | achromatomaly(): Matrix

Functions

• concatColorMatrices(matrices: Matrix[]): Matrix

Matrix type

• A 4x5 matrix for color transformations represented by array - consult Android docs for more specific info about it's format

Misc

• You may check MatrixFilterConstructor example app to play with filters
• This library was tested only with standard Image component, but in theory it should work with any image which native part is based on iOS UIImageView class and conforms to CMIFResizable protocol or is based on Android ImageView class
• Installing react-native-fast-image is not required - this module doesn't depend on it
• Recently released alternative filter package, which aims to provide an interface to most of the image filters available natively on iOS & Android: react-native-image-filter-kit

Credits

• parrot image by Robert01
• most of color filters are taken from color-matrix project by @skratchdot, Pixi.js sources and Webkit sources
• concatColorMatrices function is based on Android SDK sources
• DuoTone filter based on example by José Manuel Pérez