example that render things offscreen with gl-react – would love if you find a way to make this use-case less hacky

AutoCaptureGLThing.js

class AutoCaptureGLThing extends Component {
  onRef = exportable => {
    if (!exportable || this.exporting) return;
    this.exporting = true;
    exportable.captureFrame(/* see https://projectseptemberinc.gitbooks.io/gl-react/content/docs/api/Surface.html */)
    .then(path => { // oops back to node callback pattern via props callback
      this.props.onCapture(null, path);
    }, error => {
      this.props.onCapture(error);
    });
  };

  render () {
    const deviceWidth = ...; // if you want to render "off screen", position absolute outside of the screen is a hack here
    return (
      <View style={{ position: "absolute", top: 0, left: deviceWidth }}>
        <Surface ref={this.onRef} ...>...</Surface>
      </View>
    );
  }
}

module.exports = AutoCaptureContent;

example.js

onCapture = (error, snapshot) => {
  const { captureRequested } = this.state;
  if (error) console.error(error);
  else doSomethingWithSnapshot(snapshot);
  this.setState({ captureRequested: false });
};

render () {
  return <View>
    <Button onPress={() => this.setState({ captureRequested: true })}>CAPTURE</Button>
    <Text>...<Text>
    <Text>...<Text>
    <Text>...<Text>
    {!captureRequested ? null : <AutoCaptureGLThing {...whateverProps} onCapture={this.onCapture} />}
  </View>;
}

Hi, I think the surface should have the preload={true} option if you're manipulating external images since it may trigger once before loading the image and messing up the file you want to save.