react-native-color-matrix-image-filters
v7.0.1
Published
Various color matrix based image filters for iOS & Android
Downloads
81,643
Maintainers
Readme
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
- filter components work as wrappers for
- 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>
)
| 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.
Reference
Supported filters
| Component | Additional props | function | | ---------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | ColorMatrix | matrix: 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
- 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 AndroidImageView
class - Installing
react-native-fast-image
is not required - this module doesn't depend on it