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 { value, children: tex, ...rest } = this.props;
      return <GL.View
        {...rest}
        shader={shaders.myEffect}
        uniforms={{ value, tex }}
      />;
    }
  }

  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");