'expo run:android is stuck at blank white screen

1

As seen in the above image, after successfully building for android, the standalone app is installed on the device but when opened, before showing the Splash screen, the blank white screen appears.

This is my App.js code

import React, { useState, useEffect, useRef } from "react";
import { NavigationContainer } from "@react-navigation/native";
import StackNavigator from "./StackNavigator";
import { AuthProvider } from "./hooks/useAuth";
import { ActivityIndicator, LogBox, View } from "react-native";
import { Asset } from "expo-asset";
import {
  Roboto_100Thin,
  Roboto_100Thin_Italic,
  Roboto_300Light,
  Roboto_300Light_Italic,
  useFonts,
} from "@expo-google-fonts/roboto";
import AppLoading from "expo-app-loading";
import * as Font from "expo-font";
import * as encoding from "text-encoding";

LogBox.ignoreAllLogs();

function cacheImages(images) {
  return images.map((image) => {
    if (typeof image === "string") {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();
    }
  });
}
function cacheFonts(fonts) {
  return fonts.map((font) => Font.loadAsync(font));
}

export default function App() {
  const [ready, setReady] = useState(true);

  let [fontsLoaded] = useFonts({
    "Roboto-Thin": Roboto_100Thin,
    Roboto_100Thin_Italic,
    "Roboto-Light": Roboto_300Light,
    Roboto_300Light_Italic,
  });

  async function _loadAssetsAsync() {
    const imageAssets = await cacheImages([
      require("./ASSETS/Loading_Black.gif"),
      require("./ASSETS/icons/like.png"),
      require("./ASSETS/icons/like-red.png"),
      require("./ASSETS/icons/comment.png"),
      require("./ASSETS/icons/share.png"),
      require("./ASSETS/CHAT_BGRD-02.jpeg"),
    ]);

    await Promise.all([...imageAssets, fontsLoaded]);
  }

  return ready && fontsLoaded ? (
    <NavigationContainer>
      <AuthProvider>
          <StackNavigator />
      </AuthProvider>
    </NavigationContainer>
  ) : (
    <AppLoading
      startAsync={_loadAssetsAsync}
      onFinish={() => setReady(true)}
      onError={(e) => {
        console.log(e);
      }}
    />
  );
}

The app is perfectly running on development mode, production mode, and even tried using

expo start --no-dev --minify

All these are perfectly working fine. But if I try to run the app in standalone mode, this is what's the output is. Appreciate your help :)



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source