TypeError: undefined is not an object (evaluating '_expo.default.GLView)

[philvoyer]

Can't even get the landing page example to work from a clean empty project.
(the example from: https://github.com/expo/expo-pixi).

Did someone recently (june 2020) made something that works with expo-pixi?

Here's the dependencies from package.json:

 "dependencies": {
    "expo": "~37.0.3",
    "expo-gl": "~8.1.0",
    "expo-pixi": "^1.2.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-web": "~0.11.7"
  },

Did I miss something about the installation/configuration process?

Thanks!

[basaksilasanli]

Same issue!!

[rafipiccolo]

I just adapted the imports
and did those installs :

expo install expo-gl
expo install expo-pixi

App.js

import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import * as FileSystem from 'expo-file-system';
import base64 from 'base64-js';
import ExpoPixi from 'expo-pixi'; 

export default class App extends Component {
  constructor(props) {
    super(props);
    this.sketch = null;
  }

  stringToUint8Array(str) {
    const length = str.length;
    const array = new Uint8Array(new ArrayBuffer(length));
    for (let i = 0; i < length; i++) array[i] = str.charCodeAt(i);
    return array;
  }

  async fileToBase64(uri) {
    try {
      const content = await FileSystem.readAsStringAsync(uri);
      return base64.fromByteArray(this.stringToUint8Array(content));
    } catch (e) {
      console.warn('fileToBase64()', e.message);
      return '';
    }
  }

  fileToBase64Helper(uri) {
    return this.fileToBase64(uri);
  }

  render() {
    const color = 0x000000;
    const width = 4;
    const alpha = 1;
    return (
      <View style={{ flex: 1 }}>
        <ExpoPixi.Signature
          ref={ref => (this.sketch = ref)}
          strokeColor={color}
          strokeWidth={width}
          strokeAlpha={alpha}
          style={{ flex: 1 }}
          onChange={async () => {
            const { uri } = await this.sketch.takeSnapshotAsync({
              format: 'png',
            });
            // console.log(await this.fileToBase64Helper(uri))
            console.log(uri);
            try {
              const file = await FileSystem.readAsStringAsync(uri, {
                encoding: 'base64',
              });
              console.log(file);
            } catch (e) {
              console.error(e.message);
            }
          }}
        />
        <View
          style={{
            height: 80,
            alignItems: 'center',
            justifyContent: 'space-between',
            flexDirection: 'row',
            paddingHorizontal: 20,
          }}>
          <TouchableOpacity
            style={{
              backgroundColor: 'white',
              height: 50,
              justifyContent: 'center',
              alignItems: 'center',
              width: '45%',
              borderRadius: 6,
              borderColor: '#0d52bd',
              borderWidth: 2,
            }}>
            <Text style={{ fontSize: 19, color: 'black' }}>Cancel</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              backgroundColor: '#0d52bd',
              height: 50,
              justifyContent: 'center',
              alignItems: 'center',
              width: '45%',
              borderRadius: 6,
            }}>
            <Text style={{ fontSize: 19, color: 'white' }}>Save</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

[philvoyer]

Thanks @rafipiccolo for your answer,

Your 'Signature' example is working for me.

But, are you able to execute this code that use a GLView :

import React from 'react';
import Expo from 'expo';
import { ExpoPixi } from 'expo-pixi';

export default () => (
  <Expo.GLView
    style={{ flex: 1 }}
    onContextCreate={async context => {
      const app = new ExpoPixi.Application({ context });
      const sprite = await ExpoPixi.Sprite.fromExpoAsync(
        'http://i.imgur.com/uwrbErh.png',
      );
      app.stage.addChild(sprite);
    }}
  />
);

This is the same code as the example from https://github.com/expo/expo-pixi, but with "PIXI" swapped with "ExpoPixi".

[philvoyer]

I have also tried this:

import React from 'react';
import Expo from 'expo';
import { GLView } from 'expo-gl';
import { ExpoPixi } from 'expo-pixi';

export default () => (
  <GLView
    style={{ flex: 1 }}
    onContextCreate={async context => {
      const app = new ExpoPixi.Application({ context });
      const sprite = await ExpoPixi.Sprite.fromExpoAsync(
        'http://i.imgur.com/uwrbErh.png',
      );
      app.stage.addChild(sprite);
    }}
  />
);

In this case, no TypeError: undefined is not an object (evaluating '_expo.default.GLView) error, but a Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'new _expoPixi.ExpoPixi.Application') warning instead and a white screen with no image.

[rafipiccolo]

hello,

this one would work if it wasn't for this other bug wich prevent loading https files : #103

although It may work with http or local file. I'm pretty lazy now as i dont know how to test it.

:) 👍

import { PIXI } from 'expo-pixi';
import React from 'react';

export default () => (
  <GLView
    style={{ flexGrow: 1, flexShrink: 0, flexBasis: 'auto' }}
    onContextCreate={async context => {
      const app = new PIXI.Application({ context });
      // const texture = await PIXI.Texture.fromExpoAsync('http://i.imgur.com/uwrbErh.png');
      // const texture = await PIXI.Texture.from('http://i.imgur.com/uwrbErh.png');
      // const sprite = PIXI.Sprite.from(texture);
      // const sprite = await PIXI.Sprite.from('http://i.imgur.com/uwrbErh.png');
      const sprite = await PIXI.Sprite.fromExpoAsync('https://i.imgur.com/uwrbErh.png');
      app.stage.addChild(sprite);
    }}
  />
);```

[philvoyer]

I finally succeeded to draw a local image file with this modified version of the basic example:

import React from 'react';
import Expo from 'expo';
import { GLView } from 'expo-gl';
import { PIXI } from 'expo-pixi';

export default () => (
    <GLView
      style={{ flex: 1 }}
      onContextCreate={async context => {
        const app = new PIXI.Application({ context });
        const sprite = await PIXI.Sprite.fromExpoAsync(require('./assets/img.png'));
        app.stage.addChild(sprite);
    }}
    />
);