react-native-color-matrix-image-filters v7.0.2

react-native-color-matrix-image-filters

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

1. Install latest version from npm

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

2. Install pods

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

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) => (
  <ColorMatrix matrix={concatColorMatrices(sepia(), tint(1.25))}>
    <Image {...imageProps} />
  </ColorMatrix>
)

const ColorMatrixImage = (imageProps) => (
  <ColorMatrix matrix={concatColorMatrices(saturate(-0.9), contrast(5.2), invert())}>
    <Image {...imageProps} />
  </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

Supported filters

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

• 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