How to fix expo-app-loading is deprecated and replace it with expo-splash-screen

Question

After updating expo I keep getting this error that says:

expo-app-loading is deprecated in favor of expo-splash-screen: use SplashScreen.preventAutoHideAsync() and SplashScreen.hideAsync() instead.

Here's the my code in App.js

import React, { useState } from 'react'
import AppLoading from 'expo-app-loading';
import { NavigationContainer } from '@react-navigation/native';
import AuthNavigator from './navigation/AuthNavigator';
import AppNavigator from './navigation/AppNavigator';
import AuthContext from './auth/context';
import authStorage from './auth/storage';


const App = () => {
    const [user, setUser] = useState();
    const [isReady, setIsReady] = useState(false);
  
    const restoreToken = async () => {
      const token = await authStorage.getToken();
      if (!token) return;
      setUser(JSON.parse(token));
    }
  
    if (!isReady) {
      return (
        <AppLoading
          startAsync={restoreToken}
          onFinish={() => setIsReady(true)}
          onError={console.warn}
        />
      );
    }
  
    return (
        <AuthContext.Provider value={{user, setUser}}>
          <NavigationContainer>
              { user ? <AppNavigator /> : <AuthNavigator/> }
          </NavigationContainer>
        </AuthContext.Provider>
    )
  }

My question is how will I implement my below section code indicated below with the one expo recommend cause the expo one is used for font mine is for logged in uses.

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

and this:

    <AppLoading
      startAsync={restoreToken}
      onFinish={() => setIsReady(true)}
      onError={console.warn}
    />

expo recommended code with is this:

import React, { useCallback, useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import Entypo from '@expo/vector-icons/Entypo';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';

SplashScreen.preventAutoHideAsync();

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        await new Promise(resolve => setTimeout(resolve, 2000));
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell the application to render
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

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

  if (!appIsReady) {
    return null;
  }

Thank for your help, I will appreciate if you help recreate my code with the expo recommended code expo-splash-screen

Answer 1

 const [isReady, setIsReady] = useState(false); // this state variable tells us if our app is ready or not
  const [user, setUser] = useState(null);

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

  async function prepare() {
    // info prepares the app whilst it is about to be mounted for the first time
    try {
      // Pre-load fonts, make any API calls you need to do here
      // await Font.loadAsync(Entypo.font);
      restoreToken();
      // Artificially delay for two seconds to simulate a slow loading
      // experience. Please remove this if you copy and paste the code!
      await new Promise((resolve) => setTimeout(resolve, 2000));
    } catch (e) {
      console.warn(e);
    } finally {
      // Tell the application to render
      setIsReady(true);
    }
  }

  useEffect(() => {
    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (isReady) {
      // This tells the splash screen to hide immediately! If we call this after
      // `setAppIsReady`, then we may see a blank screen while the app is
      // loading its initial state and rendering its first pixels. So instead,
      // we hide the splash screen once we know the root view has already
      // performed layout.
      await SplashScreen.hideAsync();
    }
  }, [isReady]);

  if (!isReady) {
    return null;
  }

  return (
    <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
      <AuthContext.Provider value={{ user, setUser }}>
        <OfflineNotice />
        <NavigationContainer theme={myTheme}>
          {/* Depending on the authentication state we will vary the navigators */}
          {user ? <AppNavigator /> : <AuthNavigator />}
        </NavigationContainer>
      </AuthContext.Provider>
    </View>
  );
};