[RN] 기본 스플래시 화면 비활성화 & 커스텀 스플래시 화면 사용

📱테스트 환경

"react": "18.2.0"
"react-native": "0.74.2"

스플래시 화면을 보여주는 모듈이 있다고 하여 설치하고 사용하려고 한다.

react-native-splash-screen

해당 모듈을 설치하고 ~

App.tsx 에서 useEffect 안에 넣어주면 되는데 나는 1초의 시간동안 보여주기로 했다.

useEffect(() => {
    setTimeout(() => {
      SplashScreen.hide();
    }, 1000); //스플래시 활성화 시간
  }, []);

나는 Window 환경에서 개발하기 때문에 AOS 쪽만 설정해줬는데

// MainActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
    SplashScreen.show(this);
    super.onCreate(savedInstanceState)
}

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

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

이렇게 해주면 설정은 끝 !!

ㅇㅣ미지는 drawble 에 이미지를 넣어주고 ~ ( launch_screen 의 파일이름으로 )

mipmap 에 사이즈별 이미지를 넣어주면 된다.

근데 이제 문제가 기본 스플래시 화면( 앱 아이콘 화면 인것 같다 )도 뜨고

내가 원하는 스플래시 화면도 떠서 두개가 중복으로 나오는 버그가 있는데 ..

다음과 같이 해결할 수 있다.

// AndroidManifest.xml
<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustResize"
    android:exported="true" 
    android:theme="@style/SplashTheme"
>

// styles.xml
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/launch_screen</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowIsTranslucent">true</item>
</style>

설정해주면 내가원하는 스플래시 화면 하나만 나온다.