gl-react-native App crashed with Surface with style prop #308
Description
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;