Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iyegoroff/react-native-color-matrix-image-filters
Various color matrix based image filters for iOS & Android
https://github.com/iyegoroff/react-native-color-matrix-image-filters
color-matrix image-filters react-native
Last synced: about 13 hours ago
JSON representation
Various color matrix based image filters for iOS & Android
- Host: GitHub
- URL: https://github.com/iyegoroff/react-native-color-matrix-image-filters
- Owner: iyegoroff
- License: mit
- Created: 2018-08-01T01:35:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-01-10T21:38:08.000Z (about 1 month ago)
- Last Synced: 2025-02-11T05:46:20.398Z (4 days ago)
- Topics: color-matrix, image-filters, react-native
- Language: TypeScript
- Homepage:
- Size: 27.9 MB
- Stars: 357
- Watchers: 5
- Forks: 38
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-color-matrix-image-filters
[](https://badge.fury.io/js/react-native-color-matrix-image-filters)
[](https://github.com/iyegoroff/react-native-color-matrix-image-filters/actions/workflows/build.yml)
[](https://github.com/iyegoroff/react-native-color-matrix-image-filters/actions/workflows/publish.yml)
[](https://github.com/plantain-00/type-coverage)
[](https://www.npmjs.com/package/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](https://github.com/DylanVann/react-native-fast-image) and [expo‑image](https://www.npmjs.com/package/expo-image) components
- doesn't support gif format on iOS
- 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](https://github.com/iyegoroff/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
```javascript
import { Image } from 'react-native'
import {
Grayscale,
Sepia,
Tint,
ColorMatrix,
concatColorMatrices,
invert,
contrast,
saturate
} from 'react-native-color-matrix-image-filters'
const GrayscaledImage = (imageProps) => (
)
const CombinedFiltersImage = (imageProps) => (
)
const ColorMatrixImage = (imageProps) => (
)
```
| Original | Grayscaled |
| :----------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: |
| 
| 
|
| CombinedFilters | ColorMatrix |
| :------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------: |
| 
| 
|
## Usage
Each filter support all of `View` [props](https://facebook.github.io/react-native/docs/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](https://developer.android.com/reference/android/graphics/ColorMatrix)
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](https://github.com/iyegoroff/react-native-color-matrix-image-filters/blob/master/ios/CMIFImageView.h) protocol or is based on Android `ImageView` class
- Installing `react-native-fast-image` is not required - this module doesn't depend on it
## Credits
- parrot [image](https://commons.wikimedia.org/wiki/File:Ara_macao_-flying_away-8a.jpg) by
[Robert01](https://de.wikipedia.org/wiki/Benutzer:Robert01)
- most of color filters are taken from [color-matrix](https://github.com/skratchdot/color-matrix)
project by @skratchdot, Pixi.js [sources](https://github.com/pixijs/pixi.js/blob/dev/src/filters/colormatrix/ColorMatrixFilter.js)
and Webkit [sources](https://github.com/WebKit/webkit/blob/fd2225c344d4ea5ebcf1bdf437df251d95f8035c/Source/WebCore/platform/graphics/ColorUtilities.cpp)
- `concatColorMatrices` function is based on Android SDK [sources](https://github.com/AndroidSDKSources/android-sdk-sources-for-api-level-27/blob/048d6cef38d11a9937bccc8cec517c1b149904c5/android/graphics/ColorMatrix.java#L181-L205)
- `DuoTone` filter based on [example](https://codepen.io/jmperez/pen/LGqaxQ) by José Manuel Pérez