gl-react-native App crashed with Surface with style prop

[Bernard Seow]

bug report

I was working on to react-native app , not expo , trying to implement the and it caused app crash after loading it.

library

"gl-react": "^5.0.0",
"gl-react-native": "^5.0.0",
"react-native-unimodules": "^0.13.3",

Even not put the as as child, will still have the issue, noticed that it happened while using Surface with style <Surface style={{ width, height }}>

Expected behavior

Able to load and allow to manipulate the saturation

Actual behavior

App Crashed.

Steps to reproduce the behavior

//@flow
import React, { Component } from "react";
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from 'gl-react-native';
import { deviceHeight, deviceWidth } from '../styles/variables';

const shaders = Shaders.create({
  Saturate: {
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform sampler2D t;
uniform float contrast, saturation, brightness;
const vec3 L = vec3(0.2125, 0.7154, 0.0721);
void main() {
  vec4 c = texture2D(t, uv);
	vec3 brt = c.rgb * brightness;
	gl_FragColor = vec4(mix(
    vec3(0.5),
    mix(vec3(dot(brt, L)), brt, saturation),
    contrast), c.a);
}`,
  },
});

export const Saturate = ({ contrast, saturation, brightness, children }) => (
  <Node
    shader={shaders.Saturate}
    uniforms={{ contrast, saturation, brightness, t: children }}
  />
);

class TestScreen extends Component {
  render() {
    const filter = {
      contrast: 1,
      saturation: 0.5,
      brightness: 1
    }
    const width = deviceWidth;
    const height = deviceHeight;
    return (
      <Surface style={{ width, height: (width * 300) / 480 }}>
        <Saturate {...filter}>
          {{ uri: "https://i.imgur.com/uTP9Xfr.jpg" }}
        </Saturate>
      </Surface>
    );
  }
  static defaultProps = {
    contrast: 1,
    saturation: 1,
    brightness: 1,
  };
}

export default TestScreen;

[Carmelo Catalfamo]

Same problem here: when I pass style prop to Surface app will crash. I'm not using expo.

<Surface style={{ width: 300, height: 300 }} />

Dependencies version:

gl-react 5.0.0 (tried also with 4.1.0)
gl-react-native 5.0.0 (tried also with 4.1.0)
react-native 0.65.1
react-native-unimodules 0.14.6

Device logs:

2021-09-01 15:43:12.223 16206-16309/org.gs1.pictureit E/libc++abi: terminating with uncaught exception of type facebook::jsi::JSError: JSON Parse error: Unexpected EOF
    
    parse@[native code]
    
    --------- beginning of crash
2021-09-01 15:43:12.939 16206-16309/org.gs1.pictureit A/libc: Fatal signal 6 (SIGABRT), code -6 (SI_TKILL) in tid 16309 (mqt_js), pid 16206 (g.gs1.pictureit)

[Carmelo Catalfamo]

Seems it works with version 4.0.1

gl-react 4.0.1
gl-react-native 4.0.1

[Vu Phung]

Same issue, when i style Surface with fixed height, width.

[wol]

any solution on this guys? I am using same version 5.0

app randomly crashes on both platforms after capture

even though capture resolves successfully

[gopaluzumaki]

any updates on this issue....app is crashing when style prop is used in surface