expo: After upgrading from SDK 44 to SDK 47 errors related to expo-splash-screen dependency

Summary

After I upgraded from SDK 44 to 47, I’ve got error : Unable to resolve module expo-splash-screen from /Users/{user-name}/{Local}/{project-name}/App.js: expo-splash-screen could not be found within the project or in these directories.

My package.json:

“dependencies”: { “@expo-google-fonts/inter”: “^0.2.2”, “@expo-google-fonts/lato”: “^0.2.2”, “@expo-google-fonts/oswald”: “^0.2.2”, “@expo/vector-icons”: “^13.0.0”, “@react-native-async-storage/async-storage”: “~1.17.3”, “@react-native-community/masked-view”: “^0.1.11”, “@react-navigation/bottom-tabs”: “^6.2.0”, “@react-navigation/native”: “^6.0.8”, “@react-navigation/stack”: “^6.1.1”, “@sentry/react-native”: “4.2.2”, “expo”: “^47.0.0”, “expo-ads-admob”: “~12.0.0”, “expo-application”: “~5.0.1”, “expo-constants”: “~14.0.2”, “expo-device”: “~5.0.0”, “expo-font”: “~11.0.1”, “expo-image-manipulator”: “~11.0.0”, “expo-image-picker”: “~14.0.2”, “expo-linear-gradient”: “~12.0.1”, “expo-splash-screen”: “~0.17.5”, “expo-status-bar”: “~1.4.2”, “expo-updates”: “~0.15.6”, “firebase”: “^9.6.11”, “geofire-common”: “^5.2.0”, “lodash.memoize”: “^4.1.2”, “moment”: “^2.29.3”, “moment-hijri”: “^2.1.2”, “react”: “18.1.0”, “react-dom”: “18.1.0”, “react-hook-form”: “^7.32.2”, “react-native”: “0.70.5”, “react-native-gesture-handler”: “~2.8.0”, “react-native-google-mobile-ads”: “^6.3.0”, “react-native-google-places-autocomplete”: “^2.4.1”, “react-native-maps”: “1.3.2”, “react-native-paper”: “^4.11.2”, “react-native-paper-form-builder”: “^2.1.2”, “react-native-reanimated”: “~2.12.0”, “react-native-safe-area-context”: “4.4.1”, “react-native-screens”: “~3.18.0”, “react-native-svg”: “13.4.0”, “react-native-web”: “~0.18.7”, “react-native-webview”: “11.23.1”, “sentry-expo”: “~5.0.0” }, “devDependencies”: { “@babel/core”: “^7.19.3”, “@react-native-community/eslint-config”: “^3.0.1”, “eslint”: “^8.18.0”, “eslint-plugin-react”: “^7.30.0”, “prettier”: “^2.5.1” }, “private”: true

What platform(s) does this occur on?

Android, iOS

Environment

expo-env-info 1.0.5 environment info: System: OS: macOS 13.0.1 Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.16.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.11.0 - /usr/local/bin/npm SDKs: iOS SDK: Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1 IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8609683 Xcode: 14.1/14B47b - /usr/bin/xcodebuild npmPackages: expo: ^47.0.0 => 47.0.8 react: 18.1.0 => 18.1.0 react-dom: 18.1.0 => 18.1.0 react-native: 0.70.5 => 0.70.5 react-native-web: ~0.18.7 => 0.18.10 npmGlobalPackages: eas-cli: 2.8.0 expo-cli: 6.0.8 Expo Workflow: managed

Minimal reproducible example

import React,{useEffect,useState} from 'react';
import {LogBox} from 'react-native';
import {Provider as ThemeProvider} from 'react-native-paper'
import {SafeAreaProvider} from 'react-native-safe-area-context';

import theme from './src/infrastructure/theme/index.js';
import {StatusBar as ExpoStatusBar} from 'expo-status-bar';
import * as SplashScreen from 'expo-splash-screen'
import {useFonts} from 'expo-font'
import {Inter_400Regular,Inter_600SemiBold,Inter_700Bold,Inter_900Black} from '@expo-google-fonts/inter';
import {Lato_400Regular} from '@expo-google-fonts/lato';

import {Navigation} from './src/infrastructure/navigation';
import {AuthenticationContextProvider} from './src/services/authentication/authentication.context';
import {LocationContextProvider} from './src/services/location/location.context';
import {RestaurantsContextProvider} from './src/services/restaurants/restaurants.context';
import {onAuthStateChanged} from 'firebase/auth';
import {firebaseAuth} from './firebaseApp';
import AsyncStorage from '@react-native-async-storage/async-storage';

LogBox.ignoreLogs(['Setting a timer']);


export default function App() {
  const [loaded,setLoaded]=useState(false);
  const [initialRouteName,setInitialRouteName]=useState(null);
  const [initialLocation,setInitialLocation]=useState(null);
  const [fontsLoaded]=useFonts({
    Inter_400Regular,Inter_600SemiBold,Inter_700Bold,Inter_900Black,
    Lato_400Regular,
  });


  useEffect(() => {
    async function initializeApp() {
      try {
        onAuthStateChanged(firebaseAuth,() => {
          setLoaded(true)
        })
        const cashedLocaction=await getLastLocationFromCache()
        setInitialLocation(cashedLocaction)
        setInitialRouteName( cashedLocaction ? 'Home': 'CityPicker')
        
      } catch(e) {
        console.warn(e)
      }
    }

    let timer1 = setTimeout(() => initializeApp(), 300);
    return () => {
      clearTimeout(timer1);
    };  },[])



  

  const getLastLocationFromCache=async () => {
    
    return new Promise((resolve,reject) => { 
      try {
        AsyncStorage.getItem('@lastlocation').then(value => {
            resolve( value ? JSON.parse(value) : null )
        })
        
      } catch (e) {
        console.log('error loading',e);
        reject(e)
      }
    })
  };



  useEffect(() => {
    async function prepare() {
      try {
        if(fontsLoaded&&loaded && initialRouteName) {
          await SplashScreen.hideAsync()
        } else {
          await SplashScreen.preventAutoHideAsync()
        }
      } catch(e) {
        console.warn(e);
      }
    }

    prepare()
  },[fontsLoaded,loaded])

  if(!fontsLoaded||!loaded || !initialRouteName) return null;

  return (
    <SafeAreaProvider>
      <ThemeProvider theme={theme}>
        <AuthenticationContextProvider>
            <LocationContextProvider initialLocation={initialLocation}>
              <RestaurantsContextProvider>
                <Navigation initialRouteName={initialRouteName}  />
              </RestaurantsContextProvider>
            </LocationContextProvider>
        </AuthenticationContextProvider>
      </ThemeProvider>
      <ExpoStatusBar style="auto" />
    </SafeAreaProvider>
  );
}