as

Settings
Sign out
Notifications
Alexa
Amazon Appstore
AWS
Documentation
Support
Contact Us
My Cases
Get Started
Design and Develop
Publish
Reference
Support

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

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

    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

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

Component Description
GLView A View that acts as an OpenGL ES render target. On mounting, an OpenGL ES context is created. Its drawing buffer is presented as the contents of the View every frame

GLView props

Prop Description
enableExperimentalWorkletSupport Enables support for interacting with a gl object from code running on the Reanimated worklet thread
onContextCreate A function that will be called when the OpenGL ES context is created. The function is passed a single argument gl that extends a WebGLRenderingContext interface

Methods

Method Method type Description
createContextAsync Static method Imperative API that creates headless context which is devoid of underlying view. It's useful for headless rendering or in case you want to keep just one context per application and share it between multiple components
destroyContextAsync Static method Destroys given context
takeSnapshotAsync Static method Takes a snapshot of the framebuffer and saves it as a file to app's cache directory
destroyObjectAsync Component method Destroys given WebGLObject, e.g. a texture
takeSnapshotAsync Component method Same as static takeSnapshotAsync(), but uses WebGL context that is associated with the view on which the method is called

Implementation details

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

Supported versions

Package Version Based On @amazon-devices/react-native-kepler version
2.0.x 13.4.0 2.0.x

Additional resources

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


Last updated: Sep 30, 2025