react-native-color-matrix-image-filters

Various color matrix based image filters for iOS & Android

Usage no npm install needed!

<script type="module">
  import reactNativeColorMatrixImageFilters from 'https://cdn.skypack.dev/react-native-color-matrix-image-filters';
</script>

README

react-native-color-matrix-image-filters

npm version js-standard-style Dependency Status devDependencies Status typings included npm

Various color matrix based image filters for iOS & Android.

Status

  • iOS & Android:
  • 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

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

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