webgl texture on expo gives black screen - react-native

Question

I'm trying webGL for the first time, thing is I am working on Expo with the expo-gl package, aiming to build a filter component for photo editing. So far, I have been able to create a context successfully. When creating the shaders everything works fine (I can render a triangle, two triangles, etc...)
Problem comes when I try to load an image as a texture, I get no errors, but all I get is a black screen on the emulator and the phone (both android).
I have done checks for powOf2 images and image.onload, and I did a console.log for gl.texImage2D but got undefined. I would really appreciate any insight or help for this issue.
I divided into 4 parts what I think are the relevant pieces of code for this issue.
1.shaders(template literals):
const vertexShaderSource = '
attribute vec2 a_texCoord;
attribute vec4 a_position;
varying vec2 v_texCoord;
void main() {
gl_Position = a_position;
v_texCoord = a_texCoord;
}
';
const fragmentShaderSource = '
precision mediump float;
uniform sampler2D u_image;
varying vec2 v_texCoord;
void main() {
gl_FragColor = texture2D(u_image, v_texCoord);
}
';
2.ReactNative(expo) state and lifecicle:
export default class App extends React.Component {
state = {
ready: false,
image: null,
};
componentDidMount() {
(async () => {
const image = Asset.fromModule(require('./bw.jpg'));
await image.downloadAsync();
this.setState({
ready: true,
image,
});
})();
}
render() {
return (
<View style={styles.container}>
<Image source={require('./back.jpg')} style={{ width: '100%' }} />
<GLView
style={{ width: '100%', height: '100%', position: 'absolute' }}
onContextCreate={this._onContextCreate}
/>
</View>
);
}
3.gl context:
_onContextCreate = gl => {
if (_initialized) { return }
function createShader(gl, type, source) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (success) {
return shader;
}
//on error
console.log(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
}
//get shaders
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
function createProgram(gl, vertexShader, fragmentShader) {
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
//on error
var success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (success) {
return program;
}
console.log(gl.getProgramInfoLog(program));
gl.deleteProgram(program);
}
//create program
var program = createProgram(gl, vertexShader, fragmentShader);
//get attributes
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
//a_position buffer for fragment shader
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// three 2d points
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-1, -1,
-1, 1,
1, -1,
1, 1,
1, -1,
-1, 1,
]), gl.STATIC_DRAW);
//create the viewport
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// Clear the canvas
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// use program
gl.useProgram(program);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(
positionAttributeLocation, 2, gl.FLOAT, false, 0, 0)
gl.drawArrays(gl.TRIANGLES, 0, 6);
4.Code for the texture, and end of _onContextCreate:
//get image from state
const image = this.state.image
var texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
var uSampler = gl.getUniformLocation(program, 'u_image');
// provide texture coordinates for the rectangle.
var texCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
var positions = [
-1,-1,
-1, 1,
1,-1,
1, 1,
1,-1,
-1, 1,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.enableVertexAttribArray(texCoordLocation);
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
//create texture
var texture = gl.createTexture();
//check if image is ready
if (image.downloaded) loadTexture(texture, image)
//get image width & height for pow2 check.
const { width, height } = Image.resolveAssetSource(image);
function loadTexture(texture, img) {
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(uSampler, 0);
//pow2 check
if (isPowerOf2(width) && isPowerOf2(height)) {
gl.generateMipmap(gl.TEXTURE_2D);
} else {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
}
return texture
}
function isPowerOf2(value) {
return (value & (value - 1)) == 0;
}
gl.flush();
gl.endFrameEXP();
_initialized = true;
};
Thanks in advance!