gl-react/docs/universal.md

Sharing code across gl-react and gl-react-native

Both gl-react and gl-react-native have the same API (technically they are both using gl-react-core).

Here is the pattern to write an universal component that targets both platforms.

index.js

module.exports = function (React, GL) {

  const shaders = GL.Shaders.create({
    myEffect: {
      frag: `
precision highp float;
varying vec2 uv;

uniform float value;
uniform sampler2D tex;

void main () {
  gl_FragColor = value * texture2D(tex, uv);
}
`
    }
  });

  class MyEffect extends GL.Component {
    render () {
      const { width, height, value, children } = this.props;
      return <GL.View
        shader={shaders.myEffect}
        width={width}
        height={height}
        uniforms={{ value }}>
        <GL.Uniform name="tex">{children}</GL.Uniform>
      </GL.View>;
    }
  }

  return MyEffect;
}

react.js

module.exports = require(".")(require("react"), require("gl-react"));

react-native.js

module.exports = require(".")(require("react-native"), require("gl-react-native"));

Then on the usage part, let's say you have published your module as gl-react-myeffect, you can use:

const MyEffect = require("gl-react-myeffect/react");

or

const MyEffect = require("gl-react-myeffect/react-native");