react-native-webgl-view-shot

React Native WebGL extension to rasterize a view as a GL Texture. The library extends the Texture Config Formats of react-native-webgl to add { view } config.

Example

Install

yarn add react-native-webgl-view-shot
react-native link react-native-webgl-view-shot

Usage

import WebGLViewShot from "react-native-webgl-view-shot";
 
// render this somewhere...
 
<WebGLViewShot ref="shotRef">
   ...something to rasterize
</WebGLViewShot>
 
// then you can give the ref to react-native-webgl's loadConfig:
 
gl.getExtension("RN").loadConfig({
  view: this.refs.shotRef
}).then(({ texture }) => {
  // texture hold the rasterize image of the view, shoot at the time you called loadConfig
});
 
// But you can also enable continuous rasterization:
 
gl.getExtension("RN").loadConfig({
  view: this.refs.shotRef,
  continuous: true
}).then(({ texture }) => {
  // the texture will continuously be in sync with the View content (NB beware of some delay)
  // ... use texture like a normal WebGLTexture
});

There are 3 cases the view continuous rasterization should stop:

• the view was unmounted.
• unloadConfig(texture) was called.
• WebGLView was unmounted.

Supported views

The list of supported / rasterizable content is the same as listed in the library react-native-view-shot (even though that library is not directly used at the moment, some native code was taken from it).

Advanced notes

It is technically possible to just pass-in a View ref without using the WebGLViewShot component. However be aware of two things: (1) you still need to import "react-native-webgl-view-shot" so the format is extended, (2) you might need to use a wrapping <View collapsable={false}> for the capture to work out.