OpenGL bindings for React Native to implement complex effects over images and components

If you're here for the long run, then you might now that the ultimate goal of React (and its Native counterpart) is to abstract one day any rendering API with its declarative flavor.

The team behind ProjSept Engineering might have done another step forward into this direction with is port of gl-react for React Native. This also means an Universal API for working with OpenGL/WebGL.
Make sure to check what it is capable of doing in the attached examples.

gl-react-native on GitHub (Examples)

OpenGL bindings for react-native to implement complex effects over images and components, in the descriptive VDOM paradigm.

More technically, gl-react-native allows you to write a fragment shader that covers a View. The shader can render: generated graphics/demos, effects on top of images, effects over any UI content... anything you can imagine!

gl-react-native is directly inspired from our other project, gl-react and implements the same API (so you can write "universal" code).

const React = require("react-native");
const GL = require("gl-react-native");

const shaders = GL.Shaders.create({
  helloGL: {
    frag: `
precision highp float;  
varying vec2 uv;  
void main () {  
  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
}`,
  },
});

class HelloGL extends GL.Component {
  render() {
    const { width, height } = this.props;
    return <GL.View shader={shaders.helloGL} width={width} height={height} />;
  }
}

ExamplesAdvancedEffects