expo-gl

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

On the mounting of a GLView, an OpenGL ES context is created. You should receive an 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, for example gl.clearColor. The library doesn't natively provide a way to render an image for every frame, therefore other JS functions must be used for it, like 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 that are usable without a GLView for headless rendering. To learn more, see the documentation for createContextAsync and takeSnapshotAsync.

This library is system-deployed and available to React Native for Vega apps without a separate installation process. The library 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
• Supported versions
• Related topics

Installation

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

   Copy code Copied to clipboard.

    "dependencies": {
        ...
        "@amazon-devices/expo-gl": "~2.0.1",
        "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

See the documentation page for information about this library and API reference: Official Expo documentation for expo-gl.

Components

GLView props

Methods

Supported versions

Related topics

Supported Third-Party Libraries and Services.

Last updated: Sep 30, 2025