DP - 12번일지 - Splash image delay

react native와 expo로 웹뷰앱을 만들때, 앱을 시작함과 동시에 splash screen을 뜨게 할 수 있는데, 기본 설정대로 해주면 이 화면이 너무 순식간에 지나가서 애써 만든 Splash image를 제대로 확인할 수 없었다. 그래서 Splash image를 3초 동안 유지되게 하기 위해서 다음과 같이 코드를 작성.

app.js

import * as React from 'react';
import { WebView } from 'react-native-webview';
import * as SplashScreen from 'expo-splash-screen';
 
function sleep (ms) {
  return new Promise(
    resolve => setTimeout(resolve, ms)
  );
}
 
async function delay_splash() {
    await SplashScreen.preventAutoHideAsync();
    await sleep(3000);
    await SplashScreen.hideAsync();    
};
 
export default class App extends React.Component {
    
    render() {
        delay_splash();
        return <WebView source={{ uri: 'https://bskyvision.com' }} style={{ marginTop: 30 }} />;
    }
 
}

코드 설명

SplashScreen.preventAutoHideAsync()가 실행되면, SplashScreen.hideAsync()를 만날 때까지 자동으로 splash screen이 사라지는 것이 방지됩니다.
따라서 그 사이에 3초 딜레이를 준 것입니다.

그 함수를 delay_splash()라는 이름으로 만들었고, 그것을 render() 함수 안에 웹뷰를 리턴하기 전에 넣어줬습니다.

이렇게 해주니 splash screen이 3초 동안 유지된 후에 웹뷰가 렌더링 됨.

<참고자료>

1. https://docs.expo.dev/versions/latest/sdk/splash-screen/
2. https://docs.expo.dev/versions/latest/sdk/webview/?redirected
3. 참고 블로그