react-native-color-matrix-image-filters

!Libraries.io dependency status for latest release

Various color matrix based image filters for iOS & Android.

Status

- iOS & Android:
- filter components work as wrappers for Image, ImageBackground, react-native-fast-image and expo‑image components
- doesn't support gif format on iOS
- react-native:
- supported versions: ">=0.60.0"
- supports both "old" and "new" architecture

Getting started

$3

``
npm i react-native-color-matrix-image-filters
`

$3

if using "old" architecture:

`
npx pod-install
`

if using "new" architecture:

`
RCT_NEW_ARCH_ENABLED=1 npx pod-install
`

###

Scope

This module is meant to be used for simple stuff, like "grayscaling inactive user avatar" etc. Check
react-native-image-filter-kit if
you need some advanced features like image blending/composing, extracting filtering results to file system
and ability to create custom filters.

Example

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

const GrayscaledImage = (imageProps) => (



)

const CombinedFiltersImage = (imageProps) => (



)

const ColorMatrixImage = (imageProps) => (



)
`

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

Reference

$3

| Component | Additional props | function |
| ---------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| ColorMatrix | matrix: 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 |

$3

- concatColorMatrices(...matrices: Matrix[]): Matrix

$3

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

Misc

- This library was tested only with standard Image component, but in theory it should work with
any image that conforms to CMIFImageView protocol or is based on Android ImageView class
- Installing react-native-fast-image is not required - this module doesn't depend on it

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