React native splash screen 적용하기

업데이트

2023.01.10 업데이트(안드로이드 부분 디테일 추가)

시작하기

애플리케이션을 처음실행하면 홈화면이 등장하기전에 로고가 나오는 페이지를 splash screen이라 합니다.
react native splash screen패키지를 이용해서 splash screen를 구현해보겠습니다.

설치하기

react-native v0.60 이상에서는 자동으로 링크해주기 때문에 추가로 link를 할 필요는 없습니다.

npm i react-native-splash-screen

cd ios
pod install
cd ..

npm패키지를 설치하고 ios에 패키지를 설치해줍니다.

설정하기

안드로이드와 ios 둘다 설정하는 방법에 대해서 다뤄보겠습니다.

안드로이드에서 설정

안드로이드로 개발을 할 때 주의 사항은 android studio가 설치 되어있는지, 가상 에뮬레이터를 한번이상 켜본적 있어야합니다.
가상 에뮬레이터에서 에러가 났을때 에뮬을 재시작해보거나 앱을 삭제후 다시 설치해보는 방법을 해주면 됩니다.

MainActivity.java 설정

github사이트에 가면 MainApplication부분도 수정하라고 되어있는데, react native 최신버전에는 따로 수정을 하지 않아도 됩니다. 구버전일 경우에는 라이브러리 github으로 들어가 메뉴얼에 맞게 MainApplication을 수정해주시면 됩니다.

React native프로젝트의 android폴더를 android studio로 열어줍니다.
MainActivity.java파일을 수정하겠습니다.

app/src/main/java/com/[프로젝트이름]/MainActivity.java

// ...
import android.os.Bundle; // SplashScreen 추가
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import org.devio.rn.splashscreen.SplashScreen; // SplashScreen 추가

public class MainActivity extends ReactActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // SplashScreen 추가
        super.onCreate(savedInstanceState);
    }
    // ...
}

settings.gradle 수정

/android/settings.gradle 파일에 다음코드를 추가합니다.

/android/settings.gradle

// ... 

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

if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
 // ... 
}
// ...

build.gradle 수정

android/app/build.gradle 파일에 다음 코드를 추가해줍니다.

android/app/build.gradle

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

colors.xml 추가

android/app/src/main/res/values경로에 colors.xml파일을 생성하고 기본 색상값을 넣어줍니다.

android/app/src/main/res/values/colors.xml

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

launch_screen 설정

그리고 안드로이드에서 사용할 Splash 스크린을 생성해야 합니다.
res내부에 layout/launch_screen.xml을 생성하고 아래와 같이 소스를 추가합니다.

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>

위에 코드를 그대로 사용하셔도 되지만 Splash 이미지 파일명이 다른 경우 android:background=”@drawable/launch_screen”의 launch_screen부분을 생성하신 이미지 파일명으로 고쳐서 사용하시면 됩니다.

android/app/src/main/res경로에서 drawable-xhdpi폴더와 drawable-xxhdpi폴더를 생성해줍니다.
내부에 들어갈 launch_screen.png 파일 사이즈의 크기는 다음과 같습니다.

• drawable-xhdpi: 750 × 1334
• drawable-xxhdpi: 1242 × 2208

파일명을 launch_screen.png으로 짓고 스크린 이미지를 저장 후 폴더에 넣습니다.

재너레이터를 사용해서 안드로이드 아이콘을 만들어줍니다.
그리고 라운딩된 아이콘과 일반 아이콘 두가지 파일을 각 사이즈에 해당하는 mipmap폴더에 덮어쓰기해줍니다.

다음과 같은 구조로 되어있어야합니다.

이후 실행하면 작동되는 것을 확인할 수 있습니다.

ios에서 설정

React native프로젝트의 ios폴더를 xcode로 열어줍니다.

images.xcassets폴더에서 +버튼을 클릭하면, images를 생성할 수 있습니다.

다음부분에 이미지를 각각 사이즈에 맞춰서 넣어줍니다. 넣는 방법은 각각의 이미지를 드래그해서 넣으면 됩니다.
각각200x200, 400x400, 600x600 사이즈에 맞추었습니다.

Launch Screen.storyboard

프로젝트 폴더에서 Launch Screen.storyboard 파일을 만들어주도록 합니다.

launch screen을 선택해서 생성합니다.
이후 screen을 수정해보겠습니다.
Launch Screen.storyboard파일을 열고 기존에 텍스트나 그런것들 다 지워줍니다.
그리고 상단의 +버튼을 클릭합니다.

아이폰 홈버튼 이미지 파레트 아이콘 세개가 보이는데 그중에 이미지를 클릭하면 workspace에 추가한 이미지들이 나옵니다. 그 중에서 아까 추가해주었던 로고이미지를 끌어당기면서 아이폰모양에 가져다댑니다.
그러면 이미지가 생성이 됩니다.

생성된 이미지를 클릭한 후 오른쪽의 탭에서 뾰족한 아이콘을 클릭합니다.

이미지의 Content Mode는 Aspect Fit으로 설정해줍니다.

자모양의 아이콘을 클릭하고 Autoresizing을 가운데에 선만 활성상태가 되도록 클릭해줍니다.

Launch Screen 커스텀이 완료되었습니다.

코드 수정

사용하기 위해서는 코드를 수정해주어야합니다.

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // 추가

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [RNSplashScreen show];  // here
    //...
    return YES;
}

@end

다음으로 react native에서 코드를 추가해보겠습니다.

React native

react native에서는 간단하게 적용할 수 있습니다.

App.jsx

//...
import SplashScreen from "react-native-splash-screen";

const App = () => {
  //...
  useEffect(() => {
    SplashScreen.hide();
  }, []);
  //...
};
//...

완료

위에 내용으로 해결이 안되는 부분이 있다면 react-native-splash-screen 깃헙을 참고해주시면 됩니다.

앱 아이콘 추가하기

ios 앱아이콘을 추가하고자 할때 App icon generator 사이트에서 보유한 로고를 넣으면 자동 변환한 파일을 다운받을 수 있습니다.
그리고 xcode에서 사이즈에 맞는 이미지 하나씩 넣어주면 적용됩니다.
splash나 앱 로고가 적용이 안될시 삭제후 다시 실행해보시면 적용되는것을 확인 할 수 있습니다.