react-native-gl-image-filters

[](https://badgen.net/badge/expo/snack/blue?icon=https://symbols.getvecta.com/stencil_79/82_expo-icon.11a3983570.svg)
OpenGL bindings for React Native to implement complex effects over images and components, in the descriptive VDOM paradigm. You can use predefined filters:
- blur
- contrast
- saturation
- brightness
- hue
- negative
- sepia
- sharpen
- temperature
- exposure.


gl-react-native is an implementation of gl-react for react-native. Please read the main gl-react README and gl-react-native README for more information.

Table of Contents
=================

* API
* Props
* Constants
* DefaultValues
* Usage example
* DefaultPresets
* Usage example
* Presets
* Utils
* createPreset
* Recommended Min and Max range for each filter
* Installation
* Installation for React Native
* Configure your React Native Application
* Installation on Expo
* Installation on React Web
* Usage
* Usage with React Native
* Usage with Expo
* Usage with React web

API

- Props
- Constants
- Presets
- Utils

$3

Props for ImageFilters Component

| Name | Description | Type | Required | Default Value |
| :--- | :----- | :--- | :---: | :---: |
| children | Inner component or url for image | Any | + | |
| width | Width of component | Number | + | |
| height | Height of component | Number | + | |
| hue | Hue filter | Number | | 0 |
| blur | Blur filter | Number | | 0 |
| sepia | Sepia filter | Number | | 0 |
| sharpen | Sharpen filter | Number | | 0 |
| negative | Negative filter | Number | | 0 |
| contrast | Contrast filter | Number | | 1 |
| saturation | Saturation filter | Number | | 1 |
| brightness | Brightness filter | Number | | 1 |
| temperature | Temperature filter | Number | | 6500 |
| exposure | Exposure filter | Number | | 0 |
| 🆕 colorOverlay | Color Overlay with the length of 4 (RGBA format). Values must be a real value between 0 and 255. | Array | | [0.0, 0.0, 0.0, 0.0] |

$3

- DefaultValues
- DefaultPresets

#### DefaultValues
Can be used to set filter to default one manually.

``ts
interface DefaultValues {
sepia: number;
hue: number;
blur: number;
sharpen: number;
negative: number;
temperature: number;
brightness: number;
contrast: number;
saturation: number;
exposure: number;
colorOverlay: Array;
}
`

##### Usage example

`js
import ImageFilters, { Constants } from 'react-native-gl-image-filters';

...

state = {
blur: 4,
};

...

resetFilter = () => {
this.setState({
blur: Constants.DefaultValues.blur,
});
}
`

#### DefaultPresets
Can be used to list available presets.

`ts
interface DefaultPresets extends Array {}
`

`ts
interface DefaultPreset {
name: string,
description: string,
preset: Preset,
}
`

`ts
interface Preset {
sepia?: number;
hue?: number;
blur?: number;
sharpen?: number;
negative?: number;
temperature?: number;
brightness?: number;
contrast?: number;
saturation?: number;
exposure?: number;
}
`

##### Usage example

`js
import ImageFilters, { Constants } from 'react-native-gl-image-filters';

...

<>
{Constants.DefaultPresets.map(item =>

{item.name}
{item.description}


{{ uri: 'https://i.imgur.com/5EOyTDQ.jpg' }}



)}

`

$3

Use predefined presets.

`js
import { Presets } from 'react-native-gl-image-filters';

Presets.NoPreset;
Presets.AmaroPreset;
Presets.ClarendonPreset;
Presets.DogpatchPreset;
Presets.GinghamPreset;
Presets.GinzaPreset;
Presets.HefePreset;
Presets.LudwigPreset;
Presets.SkylinePreset;
Presets.SlumberPreset;
Presets.SierraPreset;
Presets.StinsonPreset;

...


{{ uri: 'https://i.imgur.com/5EOyTDQ.jpg' }}

`

$3

#### createPreset
Available for creating own presets.

`js
import ImageFilters, { Utils } from 'react-native-gl-image-filters';

const MyOwnPreset = Utils.createPreset({
brightness: .1,
saturation: -.5,
sepia: .15,
});

...


{{ uri: 'https://i.imgur.com/5EOyTDQ.jpg' }}

`

Recommended Min and Max range for each filter

| Name | Min. Value | Max. Value |
| :--- | :---: | :---: |
| hue | 0 | 6.3 |
| blur | 0 | 30 |
| sepia | -5 | 5 |
| sharpen | 0 | 15 |
| negative | -2 | 2 |
| contrast | -10 | 10 |
| saturation | 0 | 2 |
| brightness | 0 | 5 |
| temperature | 0 | 40000 |
| exposure | -1 | 1 |

Installation

$3

`
npm i --save react-native-gl-image-filters
npm i --save gl-react@^4.0.1
npm i --save gl-react-native@^4.0.1
npm i --save buffer@^5.4.3
npm i --save react-native-unimodules@^0.7.0
`
or
`
yarn add react-native-gl-image-filters
yarn add gl-react@^4.0.1
yarn add gl-react-native@^4.0.1
yarn add buffer@^5.4.3
yarn add react-native-unimodules@^0.7.0
`

#### Configure your React Native Application

on iOS:

https://github.com/unimodules/react-native-unimodules#-configure-ios

on Android:

https://github.com/unimodules/react-native-unimodules#-configure-android

$3

`
npm i --save react-native-gl-image-filters
npm i --save expo-gl
npm i --save gl-react@^4.0.1
npm i --save gl-react-expo@^4.0.1
npm i --save buffer@^5.4.3
`
or
`
yarn add react-native-gl-image-filters
yarn add expo-gl
yarn add gl-react@^4.0.1
yarn add gl-react-expo@^4.0.1
yarn add buffer@^5.4.3
`

$3

`
npm i --save react-native-gl-image-filters
npm i --save gl-react@^4.0.1
npm i --save gl-react-dom@^4.0.1
`
or
`
yarn add react-native-gl-image-filters
yarn add gl-react@^4.0.1
yarn add gl-react-dom@^4.0.1
``

Usage

$3

Example here: examples/react-native

$3

Snack: https://snack.expo.io/@gregoryrn/expo-gregorynative-react-native-gl-image-filters

Example here: examples/expo

$3

Blitz: https://stackblitz.com/edit/react-native-gl-image-filters-web-example

Example here: examples/web