Stuck on AppLoading / SplashScreen page when published or on TestFlight

React Native
1
  1. AppLoading was deprecated, therefore I used SplashScreen from expo official document
  2. Everything is working perfectly on Expo Go or any other simulators, however, when I did expo build --release-channel staging or on TestFlight, it stuck on the loading screen and did not move on
  3. Anyone can help? I stuck on it for long time now
1 Like
2 
export default function App() {
  const [user, setUser] = useState();

  const [appIsReady, setAppIsReady] = useState(false);

  

  const restoreUser = async () => {
    const user = await authStorage.getUser();
    if (user) {
      setUser(user);
    }
    return user;
  };



  useEffect(() => {

    async function prepare() {
      try {
        await SplashScreen.preventAutoHideAsync();
        const result = await restoreUser();

      } catch (e) {

        console.warn(e);
      } finally {

        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      const result = await SplashScreen.hideAsync();
      // console.log(result, 'hide?');
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }


  return (
    <AuthContext.Provider value={{ user, setUser }}>
      <OfflineNotice />
      <NavigationContainer
        ref={navigationRef}
        theme={navigationTheme}
        onReady={onLayoutRootView}
      >
        {user ? <AppNavigator /> : <AuthNavigator />}
      </NavigationContainer>
    </AuthContext.Provider>
  );
}
3

import AsyncStorage from “@react-native-async-storage/async-storage”;

import { NavigationContainer, useNavigation } from “@react-navigation/native”;

import { useState, useEffect, useCallback } from “react”;

import jwtDecode from “jwt-decode”;

import AppLoading from “expo-app-loading”;

import * as SplashScreen from “expo-splash-screen”;

import navigationTheme from “./app/navigation/navigationTheme”;

import AppNavigator from “./app/navigation/AppNavigator”;

import OfflineNotice from “./app/components/OfflineNotice”;

import AuthNavigator from “./app/navigation/AuthNavigator”;

import AuthContext from “./app/auth/context”;

import authStorage from “./app/auth/storage”;

SplashScreen.preventAutoHideAsync();

export default function App() {
const [user, setUser] = useState();

const [IsReady, setIsReady] = useState(false);

const restoreToken = async () => {
const token = await authStorage.getToken();
if (!token) return;

setUser(jwtDecode(token));

};

useEffect(() => {
async function prepare() {
try {
await SplashScreen.preventAutoHideAsync();
await restoreToken();
} catch (e) {
console.warn(e);
} finally {
setIsReady(true);
}
}

prepare();

}, );

const onLayoutRootView = useCallback(async () => {
if (IsReady) {
await SplashScreen.hideAsync();
// console.log(result, ‘hide?’);
}
}, [IsReady]);

if (!IsReady) {
return null;
}

return (
<AuthContext.Provider value={{ user, setUser }}>


{user ? : }

</AuthContext.Provider>
);
}