Various color matrix based image filters for iOS & Android.
- iOS & Android:
- filter components work as stackable wrappers for
Image
,ImageBackground
and react-native-fast-image components
- filter components work as stackable wrappers for
- react-native:
- with rn >= 0.56.0 use latest version
$ npm install react-native-color-matrix-image-filters --save
$ react-native link react-native-color-matrix-image-filters
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'
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 |
---|---|
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.
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 |
- concatColorMatrices(matrices: Matrix[]): Matrix
- A 4x5 matrix for color transformations represented by array - consult Android docs for more specific info about it's format
- 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 iOSUIImageView
class and conforms to CMIFResizable protocol or is based on AndroidImageView
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