Apploading threw an error

React Native
3

Since now AppLoading is deprecated I’ll post my solution using the SplashScreen module as suggested on the expo documentation.

First, install the SplashScreen module:

expo install expo-splash-screen

This is my App.js:

import React, { useCallback, useEffect, useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import jwtDecode from "jwt-decode";
import * as SplashScreen from "expo-splash-screen";

import AppNavigator from "./app/components/navigation/AppNavigator";
import AuthContext from "./app/auth/context";
import AuthNavigator from "./app/components/navigation/AuthNavigator";
import OfflineNotice from "./app/components/OfflineNotice";
import navigationTheme from "./app/components/navigation/navigationTheme";
import authStorage from "./app/auth/storage";

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 (error) {
                console.log("Error loading app", error);
            } finally {
                setIsReady(true);
            }
        }

        prepare();
    }, []);

    const onNavigationContainerReady = useCallback(async () => {
        if (isReady) await SplashScreen.hideAsync();
    }, [isReady]);

    if (!isReady) return null;

    return (
        <AuthContext.Provider value={{ user, setUser }}>
            <NavigationContainer theme={navigationTheme} onReady={onNavigationContainerReady}>
                {user ? <AppNavigator /> : <AuthNavigator />}
            </NavigationContainer>
            <OfflineNotice />
        </AuthContext.Provider>
    );
}
2 Likes