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
- Add the JavaScript library dependency in the
package.json
file."dependencies": { ... "@amazon-devices/expo-gl": "~2.0.0", "react": "~18.2.0", ... }, ... "overrides": { "react": "~18.2.0" },
- Reinstall dependencies using
npm install
command.
Examples
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