[문제해결] "expo-app-loading is deprecated in favor of expo-splash-screen"

문제

로딩 화면 구현을 위해 expo-app-loading을 적용했는데, 에러 메시지가 나왔다.

expo-app-loading is deprecated in favor of expo-splash-screen...

expo-app-loading이 나오면서 더 이상 사용하지 않는 라이브러리라고 함. 삭제 후 현재 제공하고 있는 라이브러리를 적dyd해야 한다. 

해결

1. expo-splash-screen install & import

expo-splash-screen을 설치하고, import한다.

npx expo install expo-splash-screen

import * as SplashScreen from "expo-splash-screen";

2. useEffect를 사용해 font가 load 되기 전까지 splash screen을 보여줌

expo-splash-screen이 잘 적용이 되는지 아래 코드를 넣고 테스트해보았다. 테스트 결과 font 로드가 완료됨과 동시에 screen이 닫히는 것을 확인하였다.

const [fontsLoaded] = useFonts({
  "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
  "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf"),
});

React.useEffect(() => {
  async function hideSplashScreen() {
    await SplashScreen.hideAsync(); //splash screen 닫기
  }
  if (fontsLoaded) { //font 로드완료
    hideSplashScreen(); 
  }
}, [fontsLoaded]); //fontsLoaded 상태 변경 마다 실행

if (!fontsLoaded) {
  return null;
}

expo-splash-screen 공식 문서

https://docs.expo.dev/versions/latest/sdk/splash-screen/

SplashScreen