How to use expo-gl - 7 common examples

tf.registerBackend('rn-webgl', async () => {
      const glContext = await GLView.createContextAsync();

      // ExpoGl getBufferSubData is not implemented yet (throws an exception).
      tf.ENV.set('WEBGL_BUFFER_SUPPORTED', false);

      //
      // Mock extension support for EXT_color_buffer_float and
      // EXT_color_buffer_half_float on the expo-gl context object.
      // In react native we do not have to get a handle to the extension
      // in order to use the functionality of that extension on the device.
      //
      // This code block makes iOS and Android devices pass the extension checks
      // used in core. After those are done core will actually test whether
      // we can render/download float or half float textures.
      //
      // We can remove this block once we upstream checking for these
      // extensions in expo.

const { WebGL2Kernel } = require('gpu.js/src/backend/web-gl2/kernel');
const { GLView } = require('expo-gl');

let isSupported = null;
let testContext = null;
let testCanvas = {}; // not yet supported
let testExtensions = null;
let features = null;

GLView.createContextAsync()
  .then(context => testContext = context);

class ExpoGLKernel extends WebGL2Kernel {
  static get isSupported() {
    if (isSupported !== null) {
      return isSupported;
    }
    this.setupFeatureChecks();
    isSupported = this.isContextMatch(testContext);
    return isSupported;
  }

  static get testContext() {
    return testContext;
  }

in vec2 textureCoord;
out vec4 fragColor;

void main() {
  vec4 textureColor = texture(inputImageTexture, textureCoord);
  vec3 rgb = (textureColor.rgb - vec3(0.5)) * contrast + vec3(0.5);

  fragColor = vec4(rgb, textureColor.a);
}`;

// location to contrast uniform
let contrastLocation: WebGLUniformLocation | null;

// create and prepare GL context
const glPromise = GLView.createContextAsync().then(async gl => {
  // Compile vertex and fragment shaders
  const vertShader = gl.createShader(gl.VERTEX_SHADER)!;
  gl.shaderSource(vertShader, vertShaderSource);
  gl.compileShader(vertShader);

  const fragShader = gl.createShader(gl.FRAGMENT_SHADER)!;
  gl.shaderSource(fragShader, fragShaderSource);
  gl.compileShader(fragShader);

  // Link, use program, save and enable attributes
  const program = gl.createProgram()!;
  gl.attachShader(program, vertShader);
  gl.attachShader(program, fragShader);
  gl.linkProgram(program);
  gl.validateProgram(program);

async draw() {
    if (this.isDrawing) {
      // if another draw call is already running, we need to skip this one
      return;
    }

    this.isDrawing = true;

    const gl = await glPromise;

    gl.uniform1f(contrastLocation, this.state.contrast);
    gl.drawArrays(gl.TRIANGLES, 0, 6);
    gl.endFrameEXP();

    // we need to use flip option because framebuffer contents are flipped vertically
    const snapshot = await GLView.takeSnapshotAsync(gl, {
      flip: true,
    });

    // delete previous snapshot
    if (this.state.snapshot) {
      FileSystem.deleteAsync(this.state.snapshot.uri as string, { idempotent: true });
    }

    this.setState({ snapshot });
    this.isDrawing = false;
  }

get() {
      deprecatedModule(
        `import { GLView } from 'expo' -> import { GLView } from 'expo-gl'`,
        'expo-gl'
      );
      return require('expo-gl').GLView;
    },
  },

export { default as takeSnapshotAsync } from './takeSnapshotAsync/captureRef';
export { AdMobBanner, AdMobInterstitial, AdMobRewarded, PublisherBanner } from 'expo-ads-admob';
export { Segment };
export { Asset } from 'expo-asset';
export { AppAuth };
export { BackgroundFetch };
export { BarCodeScanner } from 'expo-barcode-scanner';
export { Calendar };
export { Camera } from 'expo-camera';
export { Constants };
export { Contacts };
export { DocumentPicker };
export { FaceDetector };
export { FileSystem };
export { Font };
const GLView = GL.GLView;
export { GL, GLView };
export { GoogleSignIn };
export { ImageManipulator };
export { Haptics, Haptics as Haptic };
export { ImagePicker };
export { LocalAuthentication };
export { IntentLauncher, IntentLauncher as IntentLauncherAndroid };
export { Localization };
export { Crypto };
export { Location };
export { MediaLibrary };
export { Permissions };
export { Print };
export { Sensors };
export {
  Accelerometer,