Awesome
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
<!--ts--> <!--te-->API
Props
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] |
Constants
DefaultValues
Can be used to set filter to default one manually.
interface DefaultValues {
sepia: number;
hue: number;
blur: number;
sharpen: number;
negative: number;
temperature: number;
brightness: number;
contrast: number;
saturation: number;
exposure: number;
colorOverlay: Array<number>;
}
Usage example
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.
interface DefaultPresets extends Array<DefaultPreset> {}
interface DefaultPreset {
name: string,
description: string,
preset: Preset,
}
interface Preset {
sepia?: number;
hue?: number;
blur?: number;
sharpen?: number;
negative?: number;
temperature?: number;
brightness?: number;
contrast?: number;
saturation?: number;
exposure?: number;
}
Usage example
import ImageFilters, { Constants } from 'react-native-gl-image-filters';
...
<>
{Constants.DefaultPresets.map(item =>
<View>
<Text>{item.name}</Text>
<Text>{item.description}</Text>
<Surface>
<ImageFilters {...item.preset}>
{{ uri: 'https://i.imgur.com/5EOyTDQ.jpg' }}
</ImageFilters>
</Surface>
</View>
)}
</>
Presets
Use predefined presets.
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;
...
<ImageFilters {...Presets.StinsonPreset}>
{{ uri: 'https://i.imgur.com/5EOyTDQ.jpg' }}
</ImageFilters>
Utils
createPreset
Available for creating own presets.
import ImageFilters, { Utils } from 'react-native-gl-image-filters';
const MyOwnPreset = Utils.createPreset({
brightness: .1,
saturation: -.5,
sepia: .15,
});
...
<ImageFilters {...MyOwnPreset}>
{{ uri: 'https://i.imgur.com/5EOyTDQ.jpg' }}
</ImageFilters>
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
Installation for React Native
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
Installation on Expo
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
Installation on React Web
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
Usage with React Native
Example here: examples/react-native
Usage with Expo
Snack: https://snack.expo.io/@gregoryrn/expo-gregorynative-react-native-gl-image-filters <br> Example here: examples/expo
Usage with React web
Blitz: https://stackblitz.com/edit/react-native-gl-image-filters-web-example <br> Example here: examples/web