question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 };

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
JinHoSocommented, Aug 26, 2018

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

2018-08-27 12 54 51 2018-08-27 12 53 59
0reactions
grecommented, May 31, 2022

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
Read more comments on GitHub >

github_iconTop Results From Across the Web

Blank Screen Issue on iOS #26605 - GitHub
Hi quick update, I just found out that in Xcode if I build/run the app and goes success and show white blank screen...
Read more >
React Nativ iOS APP is loading black screen ... - Stack Overflow
It's Launch successful but with black screen. Also I can not see any option on Launcher. Please see below image. enter image description...
Read more >
app has black screen on device. wo… - Apple Developer
app has black screen on device. works fine on simulator. no error messages. ... problem - app shows launch screen and then shows...
Read more >
App iOS stuck on blank white screen when build release ...
The app works if build in Debug(react-native run-ios) but does not work in Release(build release by Xcode or terminal). react-native v0.53.0.
Read more >
iOS Simulator - Expo Documentation
We recommend updating your operating system to the latest version and then updating Xcode. You may run into issues further down the line...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found