ets-reactnative1 / react-native-gl-image-filters

React-Native image filters using gl-react

react-native-gl-image-filters

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

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
• DefaultPresets

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
Example here: examples/expo

Usage with React web

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