Intro.js

const React = require("react-native");
const {
  View,
  Text,
} = React;

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

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

uniform float time;
uniform float amp;
uniform float freq;
uniform float colorSeparation;
uniform sampler2D texture;
uniform float moving;

vec2 lookup (vec2 offset) {
  return mod(
    uv + amp * vec2(cos(freq*(uv.x+offset.x)+time),sin(freq*(uv.y+offset.x)+time)) + vec2(moving * time/10.0, 0.0),
    vec2(1.0));
}

void main() {
  gl_FragColor = vec4(
    vec3(
    texture2D(texture, lookup(vec2(colorSeparation))).r,
    texture2D(texture, lookup(vec2(-colorSeparation))).g,
    texture2D(texture, lookup(vec2(0.0))).b),
    1.0);
}
`
  }
});

class Intro extends React.Component {
  render () {
    const { time, fps, width, height } = this.props;
    return <GL.View
      shader={shaders.drunkEffect}
      width={width}
      height={height}
      opaque={false}
      uniforms={{
        time: time,
        freq: 20 - 14 * Math.sin(time / 7),
        amp: 0.05 - 0.03 * Math.cos(time / 4),
        colorSeparation: 0.02,
        moving: 1
      }}>
      <GL.Uniform name="texture">
        <View style={{ flex: 1, justifyContent: "center" }}>
          <Text style={{ color: "#00BDF3", fontSize: 32, letterSpacing: -1.0 }}>
            GL REACT NATIVE
          </Text>
          <View style={{ flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
            <View style={{ backgroundColor: "#00FF66", marginRight: 8, width: 14, height: 14, borderRadius: 7, opacity: time%1 < 0.6 ? 1 : 0 }} />
            <Text style={{ flex: 1, color: "#00FF66", fontSize: 14 }}>
              {time.toFixed(2)}s
            </Text>
            <Text style={{ flex: 1, color: "#fff", fontSize: 14 }}>
              {(fps).toFixed(0)} fps
            </Text>
            <Text style={{ flex: 1, color: "#999", fontSize: 14 }}>
              {"<Text />"}
            </Text>
          </View>
        </View>
      </GL.Uniform>
    </GL.View>;
  }
}

module.exports = Intro;