expo / expo-pixi

Tools for using pixi.js in Expo
MIT License
304 stars 118 forks source link

expo web support would be great #72

Open kations opened 5 years ago

guyzmo commented 4 years ago

I've tried running it on expo-web, and I'm wondering whether this can solved. I mean PixiJS has been built for browsers, so if it can do the most (running on native), it definitely can do the lesser.

When I launch a signature view (that works on expo native on iOS/Android), I get the following error:

Warning: GLView: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

It looks like what fails is the setRef method being used in the GLView component declaration.

I'm not sure why this works fine on RN on devices, but not on RN on the web.

guyzmo commented 4 years ago

ok, I managed to make it work, and there are two things that RNW does not like.

The first one is to use <GLView ... ref={this.setRef} ... />. I did not really dug into expo-gl to see why the difference, though, but still. My change is simple, as what we want is to call methods from the mounted GLView component, all I had to do is change the render method and call this.setRef before returning:

  render() {
    const glView = (
      <GLView
        {...this.panResponder.panHandlers}
        onLayout={this.onLayout}
        key={'Expo.Signature-' + global.__ExpoSignatureId}
        {...this.props}
        onContextCreate={this.onContextCreate}
      />
    );
    this.setRef(glView);
    return glView;
  }

Then, another thing broke, it's the context.getContextAttributes:

Uncaught (in promise) TypeError: Illegal invocation
    at WebGL2RenderingContext.context.getContextAttributes (Signature.js:144)
    ...

I checked and there's indeed a context.getContextAttributes member, and it's a function. But why it throws an Illegal Invocation is a mystery to me.

Though, because there's a check for that value to be falsy, I figured I'd try without it, and I added:

    const getAttributes = (Platform.OS === 'web') ?
      (() => ({})) :
      context.getContextAttributes || (() => ({}));

Actually, in my experience, having the NOP function getContextAttributes() does not make much difference.

As of yet, I did try the clear() method and it works, I'm going to try the snapshot method soon.

If those changes are ok, I can make a Pull Request.