react-native-color-matrix-image-filters
    TypeScript icon, indicating that this package has built-in type declarations

    5.2.10 • Public • Published

    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 "

    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

    Install

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

    DownloadsWeekly Downloads

    7,459

    Version

    5.2.10

    License

    MIT

    Unpacked Size

    1.51 MB

    Total Files

    163

    Last publish

    Collaborators

    • iyegoroff