gl-react-expo shader with external image texture input - reactjs

Question

I'm trying to use gl-react-expo shaders to apply some effects on some images in an Expo project. The images are from an external url (like http://i.imgur.com/rkiglmm.jpg).
I can make simple shaders that don't use a texture input, and it works perfectly. But I am not finding the correct way to pass the image to the shader. I'm trying to implement the DiamondCrop example from this site (http://greweb.me/2016/06/glreactconf/) and all the other simple examples that I found that passes an image to the shader. But none of them work.
This is my shader definition:
import React from "react";
import { Shaders, Node, GLSL } from "gl-react";
const frags = {
diamond: GLSL`
precision highp float;
varying vec2 uv;
uniform sampler2D t;
void main () {
gl_FragColor = mix(
texture2D(t, uv),
vec4(0.0),
step(0.5, abs(uv.x - 0.5) + abs(uv.y - 0.5))
);
}`
}
const shaders = Shaders.create({
DiamondCrop: {
frag: frags.image
}
});
const DiamondCrop = ({ children: t }) => (
<Node
shader={shaders.DiamondCrop}
// uniformsOptions={{
// t: { interpolation: "nearest" },
// }}
uniforms={ { t } }
>
</Node>
);
export { DiamondCrop }
I tried passing the image in the following ways:
// 1
<Surface style={{width: 200, height: 200}}>
<DiamondCrop>
{{uri:'http://i.imgur.com/rkiglmm.jpg'}}
</DiamondCrop>
</Surface>
// 2
<Surface style={{width: 200, height: 200}}>
<DiamondCrop>
{{image:{uri:'http://i.imgur.com/rkiglmm.jpg'}}}
</DiamondCrop>
</Surface>
// 3
<Surface style={{width: 200, height: 200}}>
<DiamondCrop>
http://i.imgur.com/rkiglmm.jpg
</DiamondCrop>
</Surface>
// 4
<Surface style={{width: 200, height: 200}}>
<DiamondCrop>
{'http://i.imgur.com/rkiglmm.jpg'}
</DiamondCrop>
</Surface>
And the errors I get are the following:
// 1 (on 'expo red screen of death')
undefined is not an object (evaluating '_expo2.default.FileSystem')
// 2 (Expo warning; nothing appears on the Surface region)
Node#1(DiamondCrop#2), uniform t: no loader found for value, Object {
"image": Object {
"uri": "http://i.imgur.com/rkiglmm.jpg",
},
}, Object {
"image": Object {
"uri": "http://i.imgur.com/rkiglmm.jpg",
},
}
// 3 (Expo warning; nothing appears on the Surface region)
Node#1(DiamondCrop#2), uniform t: no loader found for value, http://i.imgur.com/rkiglmm.jpg, http://i.imgur.com/rkiglmm.jpg
// 4 (Expo warning; nothing appears on the Surface region)
Node#1(DiamondCrop#2), uniform t: no loader found for value, http://i.imgur.com/rkiglmm.jpg, http://i.imgur.com/rkiglmm.jpg
Could anyone point me in the right directions to accomplish this task??

Answer 1

This question is quite old, but I wanted to write an answer for those who may be into the gl related stuff with react-native and Expo.
TL;DR The reason this is happening is because the library gl-react-expo is outdated, it is doing import Expo from "Expo" which is deprecated(breaks the entire thing actually) in V33 of expo SDK.
I made a github repo that hosts the corrected libraries, you may want to use that. Here is the link gl-expo-libraries Also, If you want to stick to original libraries then go to the node_modules folder, go to the gl-react-expo fodler and look for _expo2 variable in the files and change _expo2.default to _expo. It will do the trick.
Cheers :)