Nullifying Precipitation Machine

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

    0.0.1 • Public • Published

    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:
      • with rn >= 0.56.0 use latest version

    Getting started

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

    Automatic installation

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

    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'

    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 which native part is based on iOS UIImageView class and 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

    Install

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

    DownloadsWeekly Downloads

    7

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    3.24 MB

    Total Files

    113

    Last publish

    Collaborators

    • dyx359