Gl-Hello-World Not working

Expo SDK
1

Please provide the following:

  1. SDK Version: 38
  2. Platforms(Android/iOS/web/all): iOS

Following the gl-hello-world thing found here

The only change I made was turning it into a component, other than that I didn’t modify anything, but the compiling fails with error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, undefined,  You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Code:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { GLView } from 'expo';

const vertSrc = `
void main(void) {
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
  gl_PointSize = 100.0;
}
`;

const fragSrc = `
void main(void) {
  gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
`;

let _initialized = false;
// lol

class GLTest extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <GLView
          style={{ width: 300, height: 300 }}
          onContextCreate={this._onContextCreate}
        />
      </View>
    );
  }

  _onContextCreate = gl => {
    //if (_initialized) {
      //return;
    //}

    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    gl.clearColor(0, 1, 1, 1);

    // Compile vertex and fragment shader
    const vert = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vert, vertSrc);
    gl.compileShader(vert);
    const frag = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(frag, fragSrc);
    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();
    _initialized = true;
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default GLTest

Usually, this error comes when you have improper inputs, but this shouldn’t be the case here, as I just directly copy-pasted the code from the expo repo.

2

Usually, this error comes when you have improper inputs, but this shouldn’t be the case here, as I just directly copy-pasted the code from the expo repo.

Yes but example is using sdk19 and you are using sdk 38. In this case I think that the only thing that is wrong here is import, it should be import { GLView } from 'expo-gl';

If you want to learn how to use expo-gl read documentation GLView - Expo Documentation or examples in expo/expo repo expo/apps/native-component-list/src/screens/GL at master · expo/expo · GitHub

3

Yes, works fine after some minor updates. The only update to the source code is:

1 Like
4

Thanks for merging it, @wkozyra. :slight_smile:

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.