gl-react/packages/gl-react-native/src/GLViewNative.js

//@flow
import React, { Component } from "react";
import PropTypes from "prop-types";
import { View } from "react-native";
import EXGLView from "./EXGLView";

const propTypes = {
  onContextCreate: PropTypes.func.isRequired,
  style: PropTypes.any
};

export default class GLViewNative extends Component {
  props: {
    onContextCreate: (gl: WebGLRenderingContext) => void,
    style?: any,
    children?: any
  };
  static propTypes = propTypes;

  afterDraw(gl: WebGLRenderingContext) {
    gl.flush();
    // $FlowFixMe
    gl.endFrameEXP();
  }

  render() {
    const { style, onContextCreate, children, ...rest } = this.props;
    if (__DEV__) {
      if ("width" in rest || "height" in rest) {
        console.warn(
          "gl-react-native <Surface>: no such width/height prop. instead you must use the style prop like for a <View>."
        );
      }
    }
    return (
      <View
        {...rest}
        style={[{ position: "relative", overflow: "hidden" }, style]}
      >
        <EXGLView
          style={[
            style,
            {
              flex: 1,
              position: "absolute",
              top: 0,
              left: 0
            }
          ]}
          onContextCreate={onContextCreate}
        />
        <View style={{ opacity: 0 }}>
          {children}
        </View>
      </View>
    );
  }
}