"Signature" example is broken, project is confusing.

Asday commented 5 years ago

Refers to an archive in the repo root which doesn't exist, fixing that spews unhandled promise rejections (TypeError: gl.createBuffer is not a function. (In 'gl.createBuffer()', 'gl.createBuffer' is undefined)]), and attempting to draw anything brings up a nice red screen with undefined is not an object (evaluating '_this.renderer._update').

Expanding; the blog post introducing this module doesn't contain a working example, the snack it links to is seven versions out of date, and the README in this repo opens with "side effects"(?) talking about { PIXI }, then goes on to only use ExpoPixi, except in the example at the bottom where it uses Expo.GLView.

I'm really not sure what I'm supposed to think. :/

maggawaage commented 5 years ago

I have the same issue

gabriela-sartori commented 5 years ago

I have the same issue. I need a very simple signature module in my customer app.

SoapMTavish commented 5 years ago

I have the same issue

isocra commented 5 years ago

I have the same issue. I had it working fine using v1.0.1, and then updated to v1.1.0. Unfortunately now even if I explicitly use v1.0.1 it's not working. I get two errors:

first I get a full-screen expo error saying undefined is not an object (evaluating '_this.renderer._update') and the stacktrace says this is in _drawPath, Signature.js:95:18)
then if I dismiss that I see several `Possible Unhandled Promise Rejection (id: 2): TypeError: gl.createBuffer is not a function

What's so frustrating is that this was working fine and now it's not and I was expecting to deliver this functionality to clients next Tuesday 😞

lanklaas commented 5 years ago

@isocra you can try this

isocra commented 5 years ago

Hi @lanklaas thanks for the quick reply. Unfortunately that didn't make a difference. I get the same error(s).

I installed "@expo/browser-polyfill": "0.0.1-alpha.3" as suggested and moved back to expo-pixi@1.0.1. I found I also needed to install expo-asset-utils as it wouldn't compile without it (v 1.1.0 is fine, but expo-pixi@1.0.1 seems to need it. I ended up with expo-asset-utils@1.1.1. What's strange is that back a few weeks ago when I first installed all this and got it working, I didn't need to install either @expo/browser-polyfill or expo-asset-utils.

Here are the versions of expo-pixi and dependents that I've now got installed (using yarn list):

├─ expo-pixi@1.0.1
│  ├─ @expo/browser-polyfill@^0.0.1-alpha.3
│  ├─ @expo/browser-polyfill@0.0.1-alpha.5
│  │  ├─ expo-2d-context@^0.0.2
│  │  ├─ fbemitter@^2.1.1
│  │  ├─ text-encoding@^0.7.0
│  │  └─ xmldom-qsa@^1.0.3
│  ├─ fbemitter@2.1.1
│  ├─ gl-matrix@2.6.1
│  ├─ path@^0.12.7
│  ├─ pixi-filters@*
│  ├─ pixi-spine@^1.5.11
│  ├─ pixi.js@^4.7.0
│  ├─ text-encoding@0.7.0
│  └─ url@^0.11.0

Here's the stack trace if it's any use...

[Unhandled promise rejection: TypeError: gl.createBuffer is not a function. (In 'gl.createBuffer()', 'gl.createBuffer' is undefined)]
- node_modules/expo-2d-context/Expo2DContext.js:2394:24 in Expo2DContext
- node_modules/expo-pixi/node_modules/@expo/browser-polyfill/src/DOM/Element.js:48:42 in getContext
- node_modules/pixi.js/lib/core/renderers/canvas/CanvasRenderer.js:81:50 in CanvasRenderer
- node_modules/pixi.js/lib/core/autoDetectRenderer.js:66:40 in autoDetectRenderer
- node_modules/expo-pixi/lib/components/Signature.js:151:6 in _callee$

lanklaas commented 5 years ago

Hi @isocra,

Did you try to delete the node_modules and the package-lock.json and re-install everything? I see there is still an alpha.5 and everything needs to be alpha.3.

browser-polyfill is a package that pixi uses and the @expo/browser-polyfill just forces that sub dependency to be on a specific version.

Here are my dependencies:

"dependencies": {
    "@expo/vector-icons": "^9.0.0",
    "babel-preset-expo": "5.1.1",
    "classnames": "2.2.6",
    "color": "1.0.3",
    "expo": "^32.0.0",
    "@expo/browser-polyfill": "0.0.1-alpha.3",
    "expo-asset-utils": "1.0.0",
    "expo-image-cropper-gl-react": "^1.1.1",
    "expo-pixi": "1.0.1",
    "react-native-svg-uri": "1.2.3",
    "jest-cli": "20.0.4",
    "lz-string": "^1.4.4",
    "moment": "2.13.0",
    "native-base": "2.6.1",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-animatable": "1.3.0",
    "react-native-calendars": "1.5.6",
    "react-native-carousel-view": "0.5.1",
    "react-native-easy-grid": "0.1.17",
    "react-native-image-gallery": "^2.1.5",
    "react-native-modal-datetime-picker": "6.0.0",
    "react-native-modalbox": "1.4.2",
    "react-native-qrcode": "0.2.7",
    "react-native-view-shot": "^2.5.0",
    "react-navigation": "1.5.11"
  }

and the browser-polyfill stuff in my package-lock.json:

"@expo/browser-polyfill": {
      "version": "0.0.1-alpha.3",
      "resolved": "https://registry.npmjs.org/@expo/browser-polyfill/-/browser-polyfill-0.0.1-alpha.3.tgz",
      "integrity": "sha512-EPoxgpnRv/la0jQcVtbTiX3BmOzWpp+/aMkYhNmaeJo3xYEnpuhpUfbbadt1hPkySs7lseHT2FM8yTTptN+CcA==",
      "requires": {
        "adaptive-bezier-curve": "1.0.3",
        "adaptive-quadratic-curve": "1.0.2",
        "color-parser": "0.1.0",
        "earcut": "2.1.3",
        "extrude-polyline": "1.0.6",
        "fbemitter": "^2.1.1",
        "react-native-console-time-polyfill": "^0.0.6",
        "string-format": "2.0.0",
        "text-encoding": "^0.6.4",
        "xmldom-qsa": "^1.0.3"
      }
    }

"expo-pixi": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/expo-pixi/-/expo-pixi-1.0.1.tgz",
      "integrity": "sha512-TWmnpj8hnrLyYsiUWUkNU3CJIb9PDzmaN2M4AiC4vn/wUPR9Wfq1U1ro4T5bRhJGO1I2g2+g9TOd30OoPUUtEQ==",
      "requires": {
        "@expo/browser-polyfill": "^0.0.1-alpha.3",
        "fbemitter": "2.1.1",
        "gl-matrix": "2.6.1",
        "path": "^0.12.7",
        "pixi-filters": "*",
        "pixi-spine": "^1.5.11",
        "pixi.js": "^4.7.0",
        "url": "^0.11.0"
      }

isocra commented 5 years ago

@lanklaas, good news!! I've got it working!

Here are my dependencies:

  "dependencies": {
    "@bugsnag/expo": "^6.2.0",
    "@expo/browser-polyfill": "0.0.1-alpha.3",
    "@expo/vector-icons": "^10.0.0",
    "@jvitela/mustache-wax": "^1.0.1",
    "apollo-client": "^2.5.1",
    "aws-amplify": "^1.1.27",
    "aws-amplify-react-native": "^2.1.11",
    "aws-appsync": "^1.7.2",
    "aws-appsync-react": "^1.2.7",
    "debug": "^4.1.1",
    "expo": "^32.0.5",
    "expo-asset-utils": "1.0.0",
    "expo-pixi": "1.0.1",
    "graphql": "^14.3.0",
    "graphql-tag": "^2.10.1",
    "moment": "^2.24.0",
    "mustache": "^3.0.1",
    "react": "16.5.0",
    "react-apollo": "^2.5.5",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-fs": "^2.13.3",
    "react-native-image-view": "^2.1.4",
    "react-native-is-iphonex": "^1.0.1",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-material-ui": "^1.30.1",
    "react-native-paper": "^2.11.0",
    "react-native-vector-icons": "^6.4.2",
    "react-navigation": "^3.2.1",
    "recompose": "^0.30.0",
    "styled-components": "^4.2.0",
    "tslib": "^1.9.3"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@types/debug": "^4.1.4",
    "@types/expo": "^32.0.13",
    "@types/expo__vector-icons": "^9.0.0",
    "@types/mustache": "^0.8.32",
    "@types/react": "^16.8.16",
    "@types/react-native": "^0.57.53",
    "@types/react-native-material-ui": "^1.31.0",
    "@types/react-navigation": "^3.0.7",
    "@types/recompose": "^0.30.6",
    "babel-preset-expo": "^5.1.1",
    "prettier": "^1.17.0",
    "react-devtools": "^3.6.1",
    "react-native-debugger-open": "^0.3.19",
    "reactotron-react-native": "^3.4.1",
    "tslint": "^5.16.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.0.1",
    "typescript": "^3.4.5",
    "webpack": "^4.30.0"
  },

I did try deleting node_modules and yarn.lock but I still ended up with both alpha.3 and alpha.5, so clutching at straws I decided to try npm instead. I deleted node_modules and yarn.lock and then did npm install and it works. I would have expected that yarn and npm would install the same versions, but at least I've got a version that works.

Thanks again @lanklaas for your help!

isocra commented 5 years ago

Hi @lanklaas

I think I've got to the bottom of the problem. In the package.json file for expo-pixi it says "@expo/browser-polyfill": "^0.0.1-alpha.4". 22 days ago, a new version of browser-polyfill was published (0.0.1-alpha.5) so I reckon that the next time I reinstalled all the packages, expo-pixi got this new alpha.5 version which isn't compatible.

I've played around with a cloned version of expo-pixi and if I change the package.json dependencies to these, then it works:

  "dependencies": {
    "@expo/browser-polyfill": "0.0.1-alpha.3",
    "expo-asset-utils": "1.1.0",
    "fbemitter": "2.1.1",
    "gl-matrix": "^3.0.0",
    "path": "^0.12.7",
    "pixi-filters": "*",
    "pixi-spine": "^1.5.11",
    "pixi.js": "^4.7.0",
    "url": "^0.11.0"
  },

In fact it works without me having to add expo-asset-utils or the browser-polyfill to my own package.json. Note that I found I had to add gl-matrix here too for it to work (it's imported in signature.js).

I actually tried using 0.0.1-alpha.4 since that was the minimum version specified currently, but I can't get that to work, whereas the versions above work reliably with yarn.

I'll make a PR in case you want to merge this in.

erycson commented 5 years ago

I have the same issue

promanik commented 5 years ago

I managed to get my examples to run using the latest expo sdk 33. I still had to modify my package.json as well as the package.json of expo-pixi.

Remove package-lock.json, (and yarn.lock)
rm -fr node_modules
npm install

Edit package.json and add a dependency:

"@expo/browser-polyfill": "0.0.1-alpha.3",

Edit ./node_modules/expo-pixi/package.json. Change

"@expo/browser-polyfill": "^0.0.1-alpha.4",

to

"@expo/browser-polyfill": "0.0.1-alpha.3",

npm install
expo start -c

These are the relevant dependencies in my package.json file:

    "@expo/browser-polyfill": "0.0.1-alpha.3",
    "expo": "^33.0.0",
    "expo-asset-utils": "1.0.0",
    "expo-cli": "2.4.0",
    "expo-constants": "^5.0.1",
    "expo-file-system": "~5.0.1",
    "expo-permissions": "~5.0.1",
    "expo-pixi": "^1.1.0",
    "gl-matrix": "^3.0.0",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-navigation": "^3.11.0",
    "react-redux": "^5.1.1",
    "redux": "^4.0.1",
    "redux-actions": "^2.6.4",

tditlu commented 5 years ago

https://github.com/expo/browser-polyfill/pull/19

tditlu commented 5 years ago

I also found a solution for this:

global.__context = context;
const app = new PIXI.Application({ context });

fantatchi commented 5 years ago

Try this if you are using yarn. (I am using yarn@v1.16.0)

Remove yarn.lock and node_module
Edit package.json

  "dependencies": {
    "expo": "^33.0.0",
    "expo-asset-utils": "^1.1.1",   // <- add
    "expo-pixi": "1.0.1",       // <- add
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    //...
  },
  "devDependencies": {
    //...
  },
  "resolutions": {
    "expo-pixi/@expo/browser-polyfill": "0.0.1-alpha.3"     // <- add
  },

yarn
yarn start --clear

ksairi commented 5 years ago

@fantatchi awesome! thank you so much. That makes me avoid using my fork version to force expo-pixi to use 0.0.1-alpha.3

isocra commented 5 years ago

@fantatchi yes indeed, this fixes it for me too, thanks. It's a better working solution for us while no-one has merged #78

expo / expo-pixi

"Signature" example is broken, project is confusing. #77