Why can't I see the splash screen in standalone App(Expo) or react-native?

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.

Hi,
You have to give image url inside the app.json like this,

“splash”: {
“image”: “./images/splash-screen.png”,
“resizeMode”: “contain”,
“backgroundColor”: “#0070c0
},

Thanks

there is didn’t work.

"expo": {
    "name": "mvw",
    "description": "This project is really great.",
    "slug": "test",
    "privacy": "public",
    "sdkVersion": "30.0.0",
    "packagerOpts": {
      "config": "./rn-cli.config.js"
    },
    "splash": {
      "image": "./image/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#000000"
    },
...
 "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"
      }
    },
...
}

@taeeh
Could you please try after removing this

“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”
}

from android.

this is same. did NOT work.

"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",
    "splash": {
      "image": "./image/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#000000"
    },
    "android": {
      "package": "com.jackson.myapp",
      "publishBundlePath": "android/app/src/main/assets/shell-app.bundle",
      "publishManifestPath": "android/app/src/main/assets/shell-app-manifest.json"
    },