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:
  • supported versions: ">=0.56.0"

Installation

with react-native ">=0.60.0" 1. Install latest version from npm $ npm i react-native-color-matrix-image-filters -S 2. Install pods $ cd ios && pod install && cd ..

with react-native ">=0.56.0 <0.60.0" 1. Install latest version from npm $ npm i react-native-color-matrix-image-filters -S 2-a. Link native modules $ react-native link react-native-color-matrix-image-filters 2-b. Install pods 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' $ cd ios && pod install && cd .. 2-c. Manual installation Install manually if react-native link failed - 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 that 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