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.
| 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 |
| 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 |
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
on iOS:
https://github.com/unimodules/react-native-unimodules#-configure-ios
on Android:
https://github.com/unimodules/react-native-unimodules#-configure-android
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
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
Example here: examples/react-native
Snack: https://snack.expo.io/@gregoryrn/expo-gregorynative-react-native-gl-image-filters
Example here: examples/expo
Blitz: https://stackblitz.com/edit/react-native-gl-image-filters-web-example
Example here: examples/web