gl-react-native image loads on iOS simulator but shows black screen on iOS device

[Cristiano Santos]

bug report

library version

├── gl-react@3.15.0
└── gl-react-native@3.15.0

Expected behavior

It should show image on iOS device and simulator

Actual behavior

It only show the image on iOS simulator, when running on device it show black screen

Steps to reproduce the behavior

export default StyleSheet.create({
  surface: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'transparent',
    height: SWIPER_HEIGHT,
    width: SWIPER_WIDTH,
    zIndex: 1,
  },
});

const ColorBlend = () => (
  <Surface preload={[{ uri: 'https://i.imgur.com/iPKTONG.jpg' }]} style={styles.surface}>
    <ColorBlendGL color={[0.1, 0.9, 0.1, 1]}>
      {{ uri: 'https://i.imgur.com/iPKTONG.jpg' }}
    </ColorBlendGL>
  </Surface>
);

export const shaders = Shaders.create({
  colorBlend: {
    frag: GLSL`
    precision highp float;
    varying vec2 uv;
    uniform sampler2D tex;
    uniform vec4 color;
    vec3 blendMultiply(vec3 base, vec3 blend) {
      return base*blend;
    }
    vec3 blendMultiply(vec3 base, vec3 blend, float opacity) {
      return (blendMultiply(base, blend) * opacity + blend * (1.0 - opacity));
    }
    void main () {
      vec4 baseColor = texture2D(tex, uv);
      vec3 newColor = blendMultiply(baseColor.rgb, color.rgb, color.a);
      gl_FragColor = vec4(newColor, 1.);
    }`,
  },
});

type ColorBlendProps = { children: any, color: [number, number, number, number], onDraw?: any };
export const ColorBlendGL = ({ children: tex, color, onDraw }: ColorBlendProps) => (
  <Node shader={shaders.colorBlend} uniforms={{ tex, color }} onDraw={onDraw} />
);

ColorBlendGL.defaultProps = { onDraw: undefined };

[Jin Ho So]

same +1,
The weird thing is I tried to change {{ uri: 'https://i.imgur.com/iPKTONG.jpg' }} to {{ image: 'https://i.imgur.com/iPKTONG.jpg' }} then It was possible to display the picture but it was upside down

[Harvey Connor]

I got the exact same problem and it rotated the image 180 degrees. But won't display when using 'uri'

[Dino Trnka]

I'm having the same problem, however, changing 'uri' to 'image' didn't help :(

[Nick]

any news?

[@greweb]

probably due to expo-gl implementation to currently not handle the EXIF orientation, you might want to use an image editor to regenerate the image with the default orientation

(is it easily seen on the cookbook-expo that something is wrong)

cc @nikki93

[Ifemide]

Having the same issue...

[@greweb]

Can you confirm this is now fixed in this upcoming version? Thanks

 - gl-react-dom => 5.2.2-next.6+d39872d
 - gl-react-expo => 5.2.2-next.6+d39872d
 - gl-react-headless => 5.2.2-next.6+d39872d
 - gl-react-native => 5.2.2-next.6+d39872d
 - gl-react => 5.2.2-next.6+d39872d