JSPM

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

Color matrix filters for React Native Image component

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 Dependency Status typings included npm

Various color matrix based image filters for iOS & Android.

Getting started

$ npm install react-native-color-matrix-image-filters --save

Mostly automatic installation

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

Manual installation

link

Status

  • iOS & Android - filter components work as stackable wrappers for standard Image component.
  • React-Native:
    • with rn >= 0.56.0 use latest version

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 value={1.25}>
    <Sepia>
      <Image {...imageProps} />
    </Sepia>
  </Tint>
);

const ColorMatrixImage = (imageProps) => (
  <ColorMatrix
    matrix={concatColorMatrices([saturate(), contrast(5.16), invert(-0.94)])}
  >
    <Image {...imageProps} />
  </ColorMatrix>
);
Original Grayscaled
CombinedFilters ColorMatrix

Usage

All filters support View props. Also some filters have optional value prop which takes a number. ColorMatrix filter has matrix prop which takes a Matrix type - 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

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

Playground

You may check MatrixFilterConstructor example app to play with filters.

Credits