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