gl-react icon indicating copy to clipboard operation
gl-react copied to clipboard

Surface not show anything

Open im-hamza-dev opened this issue 5 years ago • 8 comments
trafficstars

Library version [email protected] [email protected] Issue: working on function for react native app to show HelloBlue example in Surface. But Surface doesn't render anything. I tried to put width and height in style but app crashes by doing that. I need to solve this issue urgently.. image

im-hamza-dev avatar May 08 '20 21:05 im-hamza-dev

React native surface is taking a style prop not a width/height

gre avatar May 09 '20 07:05 gre

Yeah, when I change this to style, image still doesn't rendered and app crashes after few seconds.

im-hamza-dev avatar May 09 '20 09:05 im-hamza-dev

me too,

risingsunho avatar May 12 '20 06:05 risingsunho

I gave it a try on expo app, it works perfect but in react-native app, there is a problem I can't solve

im-hamza-dev avatar May 17 '20 20:05 im-hamza-dev

Facing same issue. Any fix available?

Narinderg avatar May 18 '20 07:05 Narinderg

Any log of the crash? thanks

gre avatar Dec 23 '20 20:12 gre

@gre I have the same issue, but without any useful log ..... , any idea ? @im-hamza-dev have you found any solutions yet for non expo react native app ?

I gave it a try on expo app, it works perfect but in react-native app, there is a problem I can't solve

ssbing99 avatar Apr 25 '21 16:04 ssbing99

for me, this code works (changed width/height props to style on `Surface)

Also, make sure that you have followed all of the unimodules instructions.


import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-native";

const shaders = Shaders.create({
    helloBlue: {
      frag: GLSL`
        precision highp float;
        varying vec2 uv;
        uniform float blue;
        void main() {
            gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
        }`
    }
});

const HelloBlue = ({ blue })=>{
    return <Node shader={shaders.helloBlue} uniforms={{ blue }} />;
}

const CanvasTest = ()=>{
    return <View
        style={{ flex: 1 }}
    >
        <Surface style={{
            width: 100,
            height: 100,
        }}>
            <HelloBlue blue={1} />
        </Surface>
    </View>
}

allthetime avatar Aug 09 '21 20:08 allthetime