expo-gl

@amazon-devices/expo-gl provides GLView that acts as an OpenGL ES render target and provides a GLContext.

On mounting of GLView, an OpenGL ES context is created. It should receive a onContextCreate function, which takes a gl object. This gl object is the core way of interacting with OpenGL - with the use of JSI, expo-gl creates methods on the gl object that correspond to webgl API methods, e.g. gl.clearColor. It doesn't natively provide a way to render an image every frame and other JS functions must be used for it (e.g. setInterval). GLView's drawing buffer is presented as the contents of the View every frame indicated by calling the endFrameEXP method. Methods suffixed with EXP are expo-gl's extensions.

ExpoGL also provides static methods (i.e. usable without a GLView) for headless rendering - see documentation for createContextAsync and takeSnapshotAsync.

This is a system-deployed library and is available to React Native for Vega apps without a separate installation process. It is deployed as an autolinking library which your app links to at runtime. Compatibility is guaranteed only between the library and the version of React Native for Vega for which it is built.

• Installation
• Examples
• API reference
  • Components
    • GLView props
  • Methods
• Implementation details
• Supported versions
• Additional resources

Installation

1. Add the JavaScript library dependency in the package.json file.

   Copy code Copied to clipboard.

    "dependencies": {
        ...
        "@amazon-devices/expo-gl": "~2.0.0",
        "react": "~18.2.0",
        ...
        },
        ...
    "overrides": {
        "react": "~18.2.0"
        },
   

2. Reinstall dependencies using npm install command.

Examples

Copy code Copied to clipboard.

import React from 'react';
import {StyleSheet, View} from 'react-native';
import {GLView} from '@amazon-devices/expo-gl';

export const App = () => {
  return (
    <View style={styles.container}>
      <GLView style={styles.gl} onContextCreate={onContextCreate} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  gl: {
    width: 300,
    height: 300,
  },
});

// @ts-ignore Implicit any
function onContextCreate(gl) {
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0, 1, 1, 1);

  // Create vertex shader (shape & position)
  const vert = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(
    vert,
    `
    void main(void) {
      gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
      gl_PointSize = 150.0;
    }
  `,
  );
  gl.compileShader(vert);

  // Create fragment shader (color)
  const frag = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(
    frag,
    `
    void main(void) {
      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
  `,
  );
  gl.compileShader(frag);

  // Link together into a program
  const program = gl.createProgram();
  gl.attachShader(program, vert);
  gl.attachShader(program, frag);
  gl.linkProgram(program);
  gl.useProgram(program);

  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, 1);

  gl.flush();
  gl.endFrameEXP();
}

API reference

Check out the dedicated documentation page for info about this library, API reference and more: Official Expo documentation for expo-gl.

Components

GLView props

Methods

Implementation details

The @amazon-devices/expo-gl library on Vega doesn't support the following methods: createCameraTextureAsync and startARSessionAsync.

Supported versions

Additional resources

For information on additional libraries, see Supported Third-Party Libraries and Services.

Last updated: Sep 30, 2025