4

Error: [Unhandled promise rejection: Error: Expected URL scheme 'http' or 'https' but was 'file']

I tried to use the pixi js on the react-native expo project.

This is package.json file.

"dependencies": {
    "@expo/vector-icons": "^9.0.0",
    "expo": "^33.0.7",
    "expo-asset-utils": "^1.1.1",
    "expo-gl": "~5.0.1",
    "expo-pixi": "^1.1.0",
    "expokit": "^32.0.3",
    "lodash": "^4.17.11",
    "native-base": "^2.10.0",
    "prop-types": "^15.6.2",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-gesture-handler": "^1.0.9",
    "react-native-svg": "^9.11.1",
    "react-native-web": "^0.11.2",
    "react-navigation": "^3.0.9",
    "react-navigation-redux-helpers": "^2.0.9",
    "react-redux": "^6.0.0",
    "react-style-proptype": "^3.2.2",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "expo-cli": "^2.10.1",
    "eslint": "^5.16.0",
    "eslint-config-universe": "^1.0.7",
    "prettier": "^1.17.0"
  },
  "resolutions": {
    "expo-pixi/@expo/browser-polyfill": "0.0.1-alpha.3"
  },
  "private": true

And app.json file.

...

"privacy": "unlisted",
    "sdkVersion": "33.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./src/assets/images/icon.png",
    "splash": {
      "image": "./src/assets/images/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#222222"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    }

...

This is my screen code.

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

export default class GameReady extends React.Component {
  render() {
    return (
      <GLView
        style={{ flex: 1 }}
        onContextCreate={async context => {
          const sprite = await PIXI.Sprite.fromExpoAsync('https://ubisafe.org/images/sans-transparent-8-bit.png');
          const app = new PIXI.Application({ context });
          app.stage.addChild(sprite);
        }}
      />
    );
  }
}

Error: 



[Unhandled promise rejection: Error: Expected URL scheme 'http' or 'https' but was 'file']

Stack trace:
  node_modules\react-native\Libraries\BatchedBridge\NativeModules.js:155:41 in createErrorFromErrorData
  node_modules\react-native\Libraries\BatchedBridge\NativeModules.js:104:55 in <unknown>
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:414:4 in __invokeCallback
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:127:28 in <unknown>
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314:10 in __guard
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:126:17 in invokeCallbackAndReturnFlushedQueue
  ...

I run this project as expo start. But I get the above erorr. How can I fix this issue? Help me. Thanks.

goldvenus
  • 898
  • 1
  • 10
  • 21

1 Answers1

2

Please look at fixed snack example with local sprites and on the web:

https://snack.expo.io/@djalik/base-pixi.js

Oleg
  • 3,580
  • 1
  • 7
  • 12
  • Thanks for your response. But it does not work for me. And this is not an error, it's a warning. It is important it can not see the result screen. – goldvenus Oct 04 '19 at 17:57
  • Would please lock at this warning screen? http://prntscr.com/peyi1t – goldvenus Oct 04 '19 at 18:02
  • Now you have another error , can you try change your code as described here in side effect section also pay attention how to work with sprites:https://github.com/expo/expo-pixi/blob/master/README.md – Oleg Oct 04 '19 at 18:18
  • I updated the answer, please change sprite code like I wrote. – Oleg Oct 04 '19 at 18:24
  • I changed the code as you mentioned above, but It shows me another warning and the image doesn't render. [This is the result screen.] (http://prntscr.com/peywcf). – goldvenus Oct 04 '19 at 18:34
  • What parameter/url did you put in const sprite = await ExpoPIXI.spriteAsync – Oleg Oct 04 '19 at 18:47
  • This is an error image after I updated the sprites. http://prntscr.com/pez3bf – goldvenus Oct 04 '19 at 18:49
  • Can you post png url in your code of sprite ExpoPIXI.spriteAsync(...) – Oleg Oct 04 '19 at 18:52
  • I used this code as `const sprite = await PIXI.Sprite.fromExpoAsync('http://i.imgur.com/uwrbErh.png');` – goldvenus Oct 04 '19 at 18:58
  • You have to change as described in answer: const sprite = await ExpoPIXI.spriteAsync('https://ubisafe.org/images/sans-transparent-8-bit.png'); – Oleg Oct 04 '19 at 19:00
  • I just changed the code like that but it doesn't work for me. http://prntscr.com/pezcma – goldvenus Oct 04 '19 at 19:11
  • I will update the expo-pixi npm version and let you know the result. thanks. – goldvenus Oct 04 '19 at 19:17
  • By the way you have another problem and not that you have in your question. The previous one is solved. If you will receive the error of deprecated try to change again to version of sprite use to previous one. – Oleg Oct 04 '19 at 19:21
  • I updated the expo-pixi library but the same issue. And do you think about the `ExpoPIXI.spriteAsync(...) deprecated`? Wouldn't it be better to use this? `await PIXI.Sprite.fromExpoAsync(...)`? – goldvenus Oct 04 '19 at 19:39
  • If you have error about deprecated, use code that described in warning. – Oleg Oct 04 '19 at 19:40
  • const sprite = await PIXI.Sprite.fromExpoAsync('http://i.imgur.com/uwrbErh.png') – Oleg Oct 04 '19 at 19:42
  • I used the code described in warning, but I can get another issue. http://prntscr.com/pezqt8 – goldvenus Oct 04 '19 at 19:43
  • Can you validate the code in answer (updated): imports and url that I wrote in answer... – Oleg Oct 04 '19 at 19:51
  • I used the updated code, but another issue. http://prntscr.com/pf00iy. – goldvenus Oct 04 '19 at 20:03
  • According to warning you are using wrong url for png resource, did you set the png url of your app and not that you posted in comments – Oleg Oct 04 '19 at 20:07
  • Can you try this png url: 'https://www.fnordware.com/superpng/pngtest8rgba.png', updated in answer – Oleg Oct 04 '19 at 20:21
  • I used this code `const sprite = await PIXI.Sprite.fromExpoAsync('http://fnordware.com/superpng/pngtest8rgba.png');` But same issue. – goldvenus Oct 04 '19 at 20:25
  • Https, please look at answer, copy it as is. – Oleg Oct 04 '19 at 20:26
  • It doesn't seem to be a problem with the image path. – goldvenus Oct 04 '19 at 20:26
  • I updated the code like this `const sprite = await PIXI.Sprite.fromExpoAsync('https://fnordware.com/superpng/pngtest8rgba.png');`. But it doesn't work. Same issue. – goldvenus Oct 04 '19 at 20:30
  • i build for you snack example without problems: https://snack.expo.io/@djalik/base-pixi.js used expo-pixi": "1.2.0" – Oleg Oct 04 '19 at 20:45
  • I just saw this result, but I could not see the image on the result screen. What do you think about this? – goldvenus Oct 04 '19 at 20:57
  • Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/200421/discussion-on-answer-by-oleg-unhandled-promise-rejection-error-expected-url-s). – Samuel Liew Oct 04 '19 at 20:58
  • i put the png to assets : https://snack.expo.io/@djalik/base-pixi.js – Oleg Oct 04 '19 at 21:14
  • Thanks for your help. It works well now as assets png. Additional, would you please let me know how to load the cloud image? `https://` or `http://` – goldvenus Oct 05 '19 at 08:19
  • I updated the snack with http example also. Please look at it again. – Oleg Oct 05 '19 at 08:35