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.

cat-gl-filters

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

GitHub