[Expo] 스플래쉬 스크린 화면 안 사라지는 이슈

Question

Expo에서 제공하는 expo-splash-screen을 사용하여 앱에 스플래시 스크린을 구현하고 있습니다. APK를 추출한 후, 실제 안드로이드 기기에서 테스트해 보면 스플래시 스크린이 나타나지만 사라지지 않습니다.

하지만 동일한 앱을 안드로이드 에뮬레이터나 실제 iOS 기기에서 테스트할 경우, 스플래시 스크린이 잠깐 나타난 후 정상적으로 다음 화면으로 전환됩니다.

화면 전환 흐름은 다음과 같습니다:

• 앱을 처음 실행할 때: 스플래시 스크린 → 온보딩 화면 → 웹뷰 화면

• 두 번째 실행 이후: 스플래시 스크린 → 웹뷰 화면

또한 .env 파일을 사용하여 환경 변수를 읽고 있습니다. 혹시 값이 null일까 의심되어 로그를 찍어 확인해봤지만, 모든 값이 정상적으로 읽히고 있음을 확인했습니다.

그럼에도 불구하고, 실제 안드로이드 기기에서만 스플래시 스크린이 멈춘 상태로 유지되며 다음 화면으로 넘어가지 않는 현상이 발생하고 있습니다.

원인을 도저히 모르겠어서 도움을 부탁드립니다.

======================해결======================

App.tsx

import AsyncStorage from "@react-native-async-storage/async-storage";
import { getAnalytics, logScreenView } from "@react-native-firebase/analytics";
import { GoogleSignin } from "@react-native-google-signin/google-signin";
import { initializeKakaoSDK } from "@react-native-kakao/core";
import {
  NavigationContainer,
  useNavigationContainerRef,
} from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as SplashScreen from "expo-splash-screen";
import { useCallback, useEffect, useRef, useState } from "react";
import { View } from "react-native";
import AlbumScreen from "./src/screens/AlbumScreen";
import OnBoardingScreen from "./src/screens/OnBoardingScreen";
import WebViewScreen from "./src/screens/WebViewScreen";

SplashScreen.preventAutoHideAsync();

SplashScreen.setOptions({
  duration: 1000,
  fade: true,
});

const Stack = createStackNavigator();

export default function App() {
  // Logic
  const KAKAO_NATIVE_APP_KEY = process.env.EXPO_PUBLIC_KAKAO_NATIVE_APP_KEY;
  const GOOGLE_CLIENT_ID = process.env.EXPO_PUBLIC_GOOGLE_CLIENT_ID;
  const navigationRef = useNavigationContainerRef();
  const routeNameRef = useRef(null);

  const [firstLaunch, setFirstLaunch] = useState(null);
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    const init = async () => {
      try {
        initializeKakaoSDK(KAKAO_NATIVE_APP_KEY);
        GoogleSignin.configure({ iosClientId: GOOGLE_CLIENT_ID });
        await new Promise((resolve) => setTimeout(resolve, 2000));
      } catch (error) {
        console.warn(error);
      } finally {
        setAppIsReady(true);
      }
    };

    init();
  }, []);

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

  useEffect(() => {
    AsyncStorage.getItem("launched").then((value) => {
      if (value === null) {
        AsyncStorage.setItem("launched", "true");
        setFirstLaunch(true);
      } else {
        setFirstLaunch(false);
      }
    });
  }, []);

  if (!appIsReady || firstLaunch === null) {
    return null;
  }

  /* 
      어플 실행이 처음인 경우: Onboarding
      어플 실행이 처음이 아닌 경우: WebView
  */

  // View
  return (
    
       {
          if (navigationRef.current) {
            routeNameRef.current =
              navigationRef.current.getCurrentRoute()?.name || "WebView";
          }
        }}
        onStateChange={async () => {
          if (!navigationRef.current) return;

          const previousRouteName = routeNameRef.current;
          const currentRoute = navigationRef.current.getCurrentRoute();

          if (!currentRoute || !currentRoute.name) return;

          const currentRouteName = currentRoute.name;

          if (previousRouteName !== currentRouteName) {
            const analytics = getAnalytics();

            await logScreenView(analytics, {
              screen_name: currentRouteName,
              screen_class: currentRouteName,
            });
          }
          routeNameRef.current = currentRouteName;
        }}
      >
        
          
          
          
        
      
    
  );
}

캐티 · Answer

앱에 크래시가 나더라도 프로세스를 종료하지 않는 기법이 있어요. 이럼 어플이 멈춰서 위에 처럼 되는거 아니나요.

GentleGanymedian · Answer

just try

// app.json

	"expo": {
		...
    "splash": {
      "image": "./assets/images/splash.png", // or something u like
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    ...
  }

&


  useEffect(() => {
    if (appIsReady) {
      SplashScreen.hideAsync();
    }
  }, [appIsReady, error]);

ian0601 · Answer

1. SplashScreen.async() => SplashScreen.hideAsync();
2. 만약 모든기기에서 그런게 아니라 해당 기기에서만 그런건지도 확인해봐야 할 것 같아요. 휴대폰 설정에서 성능? 애니메이션 활성화? 이런 것도 화면을 제대로 작동 못 시키는 것에 관련이 있기도 하더라고요.

chongs02 · Answer

init부분 때문인거 같아요.
render > useEffect > init(finally에서 appIsReady: true) > onLayout
이 순서로 하신거같은데 init의 finally부분이 2초후에 실행되게 되니까
render > useEffect > init > onLayout >> finally(appIsReady: true) 이렇게 되어서
스플래시 하이드가 실행이 안 될것같습니다.

appIsReady를 useEffect바깥에 콘솔 찍어보시고 언제 변경되는지 확인해보세요!

jtop · Answer

try 구문 내 소셜 로그인을 작동하기 위해 준비하는 카카오 sdk 초기화, 구글 client id 설정하는 부분에서 .env 파일의 환경 변수 값들을 읽어오지를 못해서 생긴 이슈였습니다! 다행히 해결되었습니다.

도움 주신 분들 감사합니다!!

[Expo] 스플래쉬 스크린 화면 안 사라지는 이슈

5개의 답변

Q&A 목록