리액트 네이티브 스플래시 스크린 (Splash Screen) 적용하기

개요

리액트 네이티브에서 스플래시 스크린을 적용하는 방법을 알아보자.

스플래시 스크린 (Splash Screen) 이란?

앱을 켰을 때, 로고 등이 잠시 보였다가 사라지는 화면이다.

스플래시 스크린을 적용하는 이유는?

• 앱의 정체성을 나타내는 로고를 보여주기 위해
• 사용자가 알 필요 없는 작업을 가리기 위해

스플래시 스크린을 적용하는 목적에는 앱의 정체성을 나타내는 목적도 있겠지만, 사용자가 알 필요 없는 작업을 가리는 역할도 있다.

보통 로그인 처리가 필요한 앱에서는 앱이 켜진 직후 잠시동안 사용자의 토큰을 확인하고 로그인 처리등을 한다. 이 과정에서 보통 약간의 화면 깜빡임이 발생한다. 약 0.5초간 로그인 창이 떴다가 메인 화면으로 가는 등의 진행 과정이 필요할 수 있다.

또한 초기에 데이터를 받아와야 화면을 보여줄 수 있는 앱의 경우에는 스플래시 스크린이 나오는 동안 데이터를 받아오기도 한다.

스플래시 스크린 적용하기

패키지 설치하기

npm install react-native-splash-screen

위의 의존성을 이용한다.

android/settings.gradle 설정하기

include ':app'
includeBuild('../node_modules/react-native-gradle-plugin')

include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

android/app/build.gradle 설정하기

dependencies {
  // ...
  implementation project(':react-native-splash-screen')
}

android/app/src/main/res/values/colors.xml 파일 추가하기

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

android/app/src/main/res/layout/launch_screen.xml 파일 추가하기

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

MainActivity.java 파일 수정하기

// ...

// SplashScreen 관련 import
import org.devio.rn.splashscreen.SplashScreen;

// ...
@Override
protected void onCreate(Bundle savedInstanceState) {
  SplashScreen.show(this);
  super.onCreate(savedInstanceState);
}

리액트 네이티브 0.31 이하 버전은 import 해야 할 것이 달라지니 유의하자.

android/app/src/main/res/drawable/launch_screen.png 생성하기

스플래시 스크린으로 사용할 이미지를 넣어주면 된다.

ios/FoodDeliveryApp/AppDelegate.m 파일 수정하기

// ...
#import "RNSplashScreen.h"  // SplashScreen


#if RCT_NEW_ARCH_ENABLED
    // ...
  [RNSplashScreen show];  // SplashScreen
  return YES;
}

앱 초기에 뜨는 화면 코드 수정해주기

import SplashScreen from 'react-native-splash-screen';

// ...
finally {
  SplashScreen.hide();
}

로그인 데이터 확인 혹은 데이터 로드 등이 끝난 뒤, 적절한 타이밍에 SplashScreen 을 숨겨주자.

위의 로직이 빠지면 앱은 계속 스플래시 스크린만 띄우고 있게 된다.

레퍼런스

react-native-splash-screen