[React-Native] Lottie로 된 Splash Screen 적용하기

아무리 찾아도 정적인 splash screen이 단 1초도 안 나오는 상태에서 lottie만 splash screen으로 띄워주는 방법은 없었다. 그래서 일단 splash screen을 lottie 배경 색상과 같은 색상으로 세팅하고 자연스럽게 splash screen이 끝난 후 lottie가 재생되는 구조로 만들었다.

react-native-make로 splash image 만들기는

react-native set-splash --path ./src/assets/images/splash.png --resize cover --background “#000000”

이게 본격적인 코드!

App.tsx

import React, { useEffect, useState } from 'react';
import SplashScreen from 'react-native-splash-screen';
import Lottie from 'lottie-react-native';

const App = () => {
  const [appLoaded, setAppLoaded] = useState(false); //앱 로딩된 상태인가요?

  useEffect(() => {
    SplashScreen.hide(); // splash screen은 바로 감춥니다!
  }, []);

  useEffect(() => {
    setTimeout(() => {
      setAppLoaded(true);
    }, 3000); // 3초간 appLoaded 상태가 false이기 때문에
  }, []);

  return appLoaded ? (
    <Lottie
      source={require('./src/assets/lottie/animation.json')}
      autoPlay
      loop
    /> // Lottie 화면이 출력됩니다
  ) : (
    // App.tsx에 필요한 컴포넌트들
  );
};

export default App;