react-native-bootsplash을 사용하여 splash screen 구현하기

이번에는 react-native-bootsplash을 사용하며 겪은 약간의 시행착오를 기록하고자 한다.

일단, react-native-bootsplash는 현재 가장 안정적으로 관리되고 있는 React Native의 Splash Screen 라이브러리이다.

react native directory 검색 결과, 4개의 splash screen 라이브러리를 확인할 수 있는데 하나는 expo 라이브러리이고 나머지 세 라이브러리 중 두 라이브러리는 관리가 안된지 각각 2년, 6년이 지나가고 있다.

유일하게 최근까지 관리되고 있는 라이브러리가 React-Native-Bootsplash이다.

또한, ignite를 통해 생성한 프로젝트에 설정된 splash 스크린 라이브러리이기도 하기에 현재 기준으로 가장 믿을만한 선택지라고 생각했다.

 

🍓 사용 방법

무엇보다도 일단 설치가 필요하다.

npm i react-native-bootsplash

or

yarn add react-native-bootsplash

그리고 IOS, Android에서 각각 설정이 필요하다.

공식문서를 참고하여 최소한으로 필요한 설정만 정리하였다.

참고로, 이 설정은 React Native 0.71 버전 이상에서 유효하다. 더 낮은 버전을 사용중이라면, 이 링크를 참조하자.

IOS

일단, ios/프로젝트_이름/AppDelegate.mm 파일을 수정한다.

#import "RNBootSplash.h"

...

- (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
                          moduleName:(NSString *)moduleName
                           initProps:(NSDictionary *)initProps {
  UIView *rootView = [super createRootViewWithBridge:bridge
                                          moduleName:moduleName
                                           initProps:initProps];

  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ 이 코드를 추가한다.

  return rootView;
}

@end

그리고 Xcode를 사용하여 BootSplash.storyboard를 IOS 프로젝트 폴더에 추가한다.

제대로 추가되었다면, 프로젝트의 General -> App Icons and Launch Images에서 Launch Screen File로 BootSplash를 선택할 수 있다.

 

이렇게 IOS 설정은 비교적 간단하게 끝났다.

 

Android

우선 android/app/build.gradle에 코드를 추가한다. 

 

dependencies {
  // …

  implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
  implementation("androidx.core:core-splashscreen:1.0.0") // 추가 !

  // …
}

그리고 android/app/src/main/res/values/styles.xml에 BootTheme을 추가한다.

<resources>

  // ...

  <!-- BootTheme should inherit from Theme.SplashScreen -->
  <style name="BootTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
  </style>

</resources>

그리고 android/app/src/main/AndroidManifest.xml의 theme 속성을 추가한 BootTheme으로 바꿔준다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.rnbootsplashexample">

  <!-- … -->

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:theme="@style/BootTheme"> <!-- 이 곳을 수정하여 BootTheme으로 변경한다. -->
    <!-- … -->
  </application>
</manifest>

 

마지막으로 android/app/src/main/java/com/프로젝트_이름/MainActivity.java을 수정해준다.

// …

// 상단에 import를 추가로 두 개 더 해준다.
import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {

  // …

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this); // ⬅️ initialize the splash screen
    super.onCreate(savedInstanceState); // or super.onCreate(null) with react-native-screens
  }
}

위 부분에서 onCreate 함수가 없다면, 그대로 복사해서 이 함수를 추가해준다.

만약 있다면, RNBootSplash.init(this)를 추가하여 스플래시 스크린을 활성화하자.

난 처음에 onCreate 함수가 존재하지 않아 당황했었는데, 생각해보니 없으면 추가하면 될 일이었다.

 

이렇게 SplashScreen을 적용할 수 있지만, 만약 스스로 이미지를 가공해서 사용해야 하는 상황이라면 대단히 번거롭고 각 플랫폼의 규격을 맞춰서 올바르게 위치시켜야하는 문제점이 있다.

이 부분에서도 react-native-bootsplash은 도움을 준다.

 

놀랍게도! ✨ 로고 이미지만 가지고 있다면, 자동으로 스플래시 스크린 이미지를 생성하여 올바른 폴더에 위치시켜준다.

yarn react-native generate-bootsplash assets/bootsplash_logo_original.png \
  --background-color=F5FCFF \
  --logo-width=100 \
  --assets-path=assets \
  --flavor=main \
  --platforms=android,ios

공식문서에서는 yarn만 소개하고 있지만, npx도 사용 가능하다.

프로젝트 폴더에서 npx react-native genetate-bootsplash 명령어를 사용하면, 자동으로 이미지를 생성해준다.

예제에서 assets/bootsplash_logo_original.png에 해당하는 부분에 로고 이미지의 경로를 입력하고, 밑에 추가적으로 옵션들을 설정해준다.

배경 색상, 로고 가로 크기, 생성된 이미지들의 위치, flavor, 스플래시 스크린을 사용할 플랫폼 등을 입력하면, 자동으로 이미지를 생성해준다.

ios의 BootSplash.storyboard까지 생성해주기 때문에 로고 이미지만 있어도 스플래시 스크린 이미지를 설정할 수 있다.

 

✦ 자바스크립트

설정이 끝나고 App을 실행하면, 스플래시 스크린이 나타나지만, 영원히 꺼지지 않는다.

우리는 이 스플래시 스크린의 종료 시점을 자바스크립트 코드로 작성할 수 있다.

import RNBootSplash from "react-native-bootsplash";

RNBootSplash.hide(); // 즉시 종료
RNBootSplash.hide({ fade: true }); // 서서히 사라짐, 기본 지속시간 220ms
RNBootSplash.hide({ fade: true, duration: 500 }); // 500ms 후 서서히 사라짐

다음과 같이 hide 메서드를 사용하여 스플래시 스크린을 치울 수 있다.

다른 라이브러리와 다른 점으로, 옵션으로 fade를 사용할 수 있다.

활성화하면 한 번에 스플래시 이미지가 사라지는 것이 아니라, 서서히 사라지는 것을 확인할 수 있다.

 

 

더 자세하고 최신의 정보를 확인하고자 한다면, 깃허브를 방문하자!

 

https://github.com/zoontek/react-native-bootsplash

GitHub - zoontek/react-native-bootsplash: 🚀 Show a splash screen during app startup. Hide it when you are ready.