gre / gl-react

gl-react – React library to write and compose WebGL shaders

Home Page:https://gl-react-cookbook.surge.sh

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React-Native: (CLI) - no loader and nothing returned from render issues

enigmablue opened this issue · comments

commented

I'm on react-native-cli not expo. But i can't seem to hit the examples on the images.

*UPDATE seems like the react native demo examples found in https://github.com/gre/gl-react/tree/master/examples/cookbook-rn-shared/examples
works better. Perhaps the readme should be updated.

Am trying it out

1. When i try this contrast example https://gl-react-cookbook.surge.sh/saturation , i get this error. literally a copy paste
Node#1(Saturate#3), uniform t: no loader found for value', 'https://i.imgur.com/uTP9Xfr.jpg', 'https://i.imgur.com/uTP9Xfr.jpg',

<Surface style={{width:480, height:300}}>
      <Saturate contrast= {1} saturation={1} brightness = {1}>
        https://i.imgur.com/uTP9Xfr.jpg
      </Saturate>
    </Surface>

const Saturate = ({ contrast, saturation, brightness, children }) =>
{
  console.log("props from saturate ", contrast, saturation, brightness, children)
  return (
    <Node
    shader={shaders.Saturate}
    uniforms={{ contrast, saturation, brightness, t: children }}
    />)
}
  1. When i do the crop example https://gl-react-cookbook.surge.sh/diamondcrop
    Error: DiamondCrop(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

<Surface style={{width:480, height:300}} >
            <DiamondCrop>
            https://www.gstatic.com/webp/gallery/1.jpg
            </DiamondCrop>
  </Surface>

 const DiamondCrop = ({ children: t }) =>{
  console.log("diamond crop t ", t)
  return
  (
    <Node shader={shaders.DiamondCrop} uniforms={{ t }} />
    )
}

npm ls gl-react gl-react-dom gl-react-native
└── gl-react-native@5.0.0

in my package.json
"gl-react": "^5.0.0",
"gl-react-native": "^5.0.0",

commented

I found the right examples for react-native which was updated few weeks ago .

The children needed to be passed as {uri: "path"}