I’m making an app with Expo.
But I did standalone expo eject to use the basic module.
I wanted to see a basic splash screen, and a splash screen that I made.
Is there only a way to write it on Android Studio?
my App.json
{
"expo": {
"name": "mvw",
"description": "This project is really great.",
"slug": "test",
"privacy": "public",
"sdkVersion": "30.0.0",
"packagerOpts": {
"config": "./rn-cli.config.js"
},
"platforms": ["android"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"android": {
"package": "com.jackson.myapp",
"publishBundlePath": "android/app/src/main/assets/shell-app.bundle",
"publishManifestPath": "android/app/src/main/assets/shell-app-manifest.json",
"splash": {
"backgroundColor": "black",
"resizeMode": "contain",
"mdpi": "./image/splash.png",
"hdpi": "./image/splash@2x.png",
"xhdpi": "./image/splash@3x.png",
"xxhdpi": "./image/splash@4x.png",
"xxxhdpi": "./image/splash@5x.png"
}
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"usesIcloudStorage": true,
"bundleIdentifier": "com.jackson.myapps",
"publishBundlePath": "ios/mvw/Supporting/shell-app.bundle",
"publishManifestPath": "ios/mvw/Supporting/shell-app-manifest.json"
},
"isDetached": true,
"detach": {
"iosExpoViewUrl": "https://s3.amazonaws.com/exp-exponent-view-code/ios-v2.8.4-sdk30.0.0-3de13133-1adc-4ba1-8569-a84011e570b4.tar.gz",
"androidExpoViewUrl": "https://s3.amazonaws.com/exp-exponent-view-code/android-v2.8.1-sdk30.0.0-0fde103b-be3d-43f9-bc48-3035aa136971.tar.gz"
},
"scheme": "exp6c94a01048724a76bc92dca0c0cdd24a"
}
}
App.js
import React, { Component } from "react";
import HomeScreen from "./screen/HomeScreen";
import { Image, View, Platform } from "react-native";
import { Asset, SplashScreen, AppLoading } from "expo";
export default class AwesomeApp extends Component {
constructor(props) {
super(props);
SplashScreen.hide();
this.state = {
isReady: false
};
}
async componentDidMount() {
this.cacheResourcesAsync() // ask for resources
.then(() => this.setState({ areReasourcesReady: true })) // mark reasources as loaded
.catch(error =>
console.error(`Unexpected error thrown when loading:
${error.stack}`)
);
await Expo.Font.loadAsync({
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
Ionicons: require("native-base/Fonts/Ionicons.ttf")
});
}
async cacheResourcesAsync() {
const images = [require("./image/splash.png")];
const cacheImages = images.map(image =>
Asset.fromModule(image).downloadAsync()
);
return Promise.all(cacheImages);
}
render() {
if (!this.state.areReasourcesReady) {
return (
<View
style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
>
<Image
source={require("./image/splash.png")}
onLoad={this._cacheResourcesAsync}
/>
</View>
);
}
return <HomeScreen />;
}
}
Now I can’t see the basic splash screen, and I can see the screen I made for a while, and then I can see the home screen.
Please give us a lot of solutions and help. Thank you in advance.