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

Surface not show everything

elvis-hp opened this issue · comments

commented

feature request?

-- OR --

bug report?

I have some code:

...
import { Surface, GLImage, Negative, Blur} from 'gl-react-native';
...
render() {
      return (
      <Surface width={200} height={100} backgroundColor={'red'}>
               <Blur factor={2}>
                 <Negative>
                   https://i.imgur.com/wxqlQkh.jpg
                 </Negative> 
               </Blur>
             </Surface>
      )
  }

library version

npm ls gl-react gl-react-dom gl-react-native gl-react-expo # Please run and paste the output of this

├── gl-react@3.15.0
├── gl-react-expo@3.16.3
└── gl-react-native@3.15.0

Expected behavior

It's not show anything.

Actual behavior

Can you help me got it?

Steps to reproduce the behavior

for react-native there is no such width and height on Surface, you should directly use style={{ width, height }}
backgroundColor don't exist neither (this was in gl-react v2)

try

      <Surface style={{ width:200, height:100}}>
               <Blur factor={2}>
                 <Negative>
                   {{ uri: "https://i.imgur.com/wxqlQkh.jpg" }}
                 </Negative> 
               </Blur>
             </Surface>
commented

Thank you so much, it work for me.
But now, I can not captureFrame that photo.
I don't like to use react-native-view-shot
I like to use gl-react-native v3.
Code:

import {Surface} from 'gl-react-native';
import GLImage from 'gl-react-image';

When I press to capture button, I have:

this.image.captureFrame().then(base64data => {
          console.log("DO SOMETHING WITH", base64data);
        });

with:

<Surface ref={ref => (this.image = ref)} backgroundColor={'black'} style={{width: '100%', height: '97%'}}>
              <F1977>
                   <GLImage
                            style={{alignSelf: 'center', width: crop.width, height: crop.height}}
                            source={{uri: mainImage}} resizeMode="contain"/>
       </F1977>
</Surface>
          

Can you tell me why it's not work.

undefined is not a function (evaluating 'this.image.captureFrame()')

Thanks!

this feature is currently not possible. Expo implementation have it and as soon as we merge it back we should have it

commented

Thank's, I rollbacked to v2 and it works for me.