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

sunutech / react-native-color-matrix-image-filters Goto Github PK