I've built up an expo react-native project using Pixi js. The project is running well on the Expo platform, but after building the project into apk file, the app stops running on the mobile device. The problem is because of the use of the Pixi image library. Someone who helps me would be very much appreciated.
Please look at the error image. this
This is my package.json file.
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"link": "react-native link",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"ios:beta": "fastlane ios beta",
"android:beta": "fastlane android beta"
},
"dependencies": {
"@expo/vector-icons": "^9.0.0",
"expo": "^34.0.0",
"expo-asset-utils": "^1.1.1",
"expo-gl": "~5.0.1",
"expo-pixi": "^1.2.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-expo-viewport-units": "0.0.8",
"react-native-gesture-handler": "~1.2.1",
"react-native-paper": "2.1.3",
"react-native-svg": "^9.11.1",
"react-native-web": "^0.11.2",
"react-navigation": "^3.2.1",
"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",
"expo-asset": "latest"
},
"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
}
This is an app.json file.
{
"expo": {
"name": "aaa",
"slug": "aaa-Pro",
"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
},
"android": {
"package": "com.aaaa.game"
}
}
}
This is a my code with Pixi js.
import React from "react";
import { GLView } from "expo-gl";
import ExpoPixi, { PIXI } from "expo-pixi";
import { Asset } from 'expo-asset';
import {
Container,
Content
} from "native-base";
import styles from "./styles";
export default class GameReady extends React.Component {
render() {
return (
<Container style={styles.container}>
<Content contentContainerStyle={styles.content}>
<GLView
style={{ flex: 1 }}
onContextCreate={async context => {
const app = new PIXI.Application({ context, backgroundColor: 0x11111100 });
const sprite = await PIXI.Sprite.fromExpoAsync( require("../../assets/images/game/Rectangle_50.png"));
app.stage.addChild(sprite);
....
</Content>
</Container>
);
}
}