JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 24933
  • Score
    100M100P100Q160025F
  • License MIT

Various color matrix based image filters for iOS & Android

Package Exports

  • react-native-color-matrix-image-filters

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-color-matrix-image-filters) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-color-matrix-image-filters

npm version CircleCI 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"

Getting started

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

1. Install latest version from npm

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

$ react-native link react-native-color-matrix-image-filters

2-b. Installation with Cocoapods

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

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