React-Native Image Filters using Gl-react

React-Native Image Filters using Gl-react

OpenGL bindings for React Native to implement complex effects over images and components, in the descriptive VDOM paradigm. You can use predefined filters:

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.

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

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;
}
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>
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 [email protected]^4.0.1
npm i --save [email protected]^4.0.1
npm i --save [email protected]^5.4.3
npm i --save [email protected]^0.7.0

or

yarn add react-native-gl-image-filters
yarn add [email protected]^4.0.1
yarn add [email protected]^4.0.1
yarn add [email protected]^5.4.3
yarn add [email protected]^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 [email protected]^4.0.1
npm i --save [email protected]^4.0.1
npm i --save [email protected]^5.4.3

or

yarn add react-native-gl-image-filters
yarn add expo-gl
yarn add [email protected]^4.0.1
yarn add [email protected]^4.0.1
yarn add [email protected]^5.4.3

Installation on React Web

npm i --save react-native-gl-image-filters
npm i --save [email protected]^4.0.1
npm i --save [email protected]^4.0.1

or

yarn add react-native-gl-image-filters
yarn add [email protected]^4.0.1
yarn add [email protected]^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

Download Details:

Author: GregoryNative

Source Code: https://github.com/GregoryNative/react-native-gl-image-filters

react-native react mobile-apps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

Which is the best React Native app development company in New York?

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.