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

[onseyi]

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

[wodin]

Hi @onseyi

As they say in the Expo SDK 45 release announcement:

expo-app-loading is deprecated — use expo-splash-screen directly instead: SplashScreen.preventAutoHideAsync() and SplashScreen.hideAsync(). The implementation is only a thin wrapper around expo-splash-screen that you can copy into your project if you’d like to keep using it.

So you could copy the code from here into your app and import from the copy instead of from expo-app-loading:

You would of course need to remove the warning when you do that.

Otherwise you could try something like this:

import React, { useCallback, useEffect, useState } from 'react';
import * as SplashScreen from 'expo-splash-screen';
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';

SplashScreen.preventAutoHideAsync();

const App = () => {
  const [user, setUser] = useState();
  const [isReady, setIsReady] = useState(false);

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

    restoreToken();
  }, []);

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

  if (!isReady) {
    return null;
  }

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

export default App;