RN - Splash Screen 중복

react native앱에 안드로이드 스플래시 화면이 2개인것 같다?

김보람

Jan 15, 2024

Contents

[ 이슈 ][ 해결방안 ][ 결과 ]

[ 이슈 ]

디자인 팀에선 앱 실행과 함께 제작해준 스플래쉬화면이 바로 뜨길 원함,
아래 영상처럼 android12 버전부터 아이콘 화면이 한번뜬 후 스플래쉬 화면으로 넘어간다.

[ 해결방안 ]

아이콘이 보이는 스플래쉬스크린을 투명하게해서 꼭 없는것처럼 보이도록 한다.

//app/build.gradle

android {
   compileSdkVersion 31
   ...
}
dependencies {
   ...
   implementation 'androidx.core:core-splashscreen:1.0.0-beta01'
}

//app/src/main/res/values/styles.xml

<style name="Theme.App.Starting" parent="Theme.SplashScreen">
    <item name="android:windowIsTranslucent">true</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item> // or other theme you want to use
</style>

//AndroidManifest.xml

 <application
     ...
     android:theme="@style/Theme.App.Starting"
 >

//MainActivity.java

@Override
  protected void onCreate(Bundle savedInstanceState) {
    androidx.core.splashscreen.SplashScreen.installSplashScreen(this); 
    // ☝️☝️☝️안보일 스플래시 스크린
    
    org.devio.rn.splashscreen.SplashScreen.show(this, true); 
    // ☝️☝️☝️만든 스플래시 스크린
    
    super.onCreate(null);
  }

[ 결과 ]

이제 아이콘 스플래시 스크린이 아닌 작업한 스크린이 먼저 랜더되긴하나,
아이콘을 터치한후 잠깐의 딜레이가 걸린것처럼 보일수있다 이는 사실 아이콘이 보이던 스크린이 완전 안뜨는게 아니라 투명하게 해서 떠있으나 보이지 않기때문에 그 스크린이 떠있는만큼 딜레이가 있는것처럼 느껴지는 것이다.

그닥 좋아보이는 해결법은 아닌것같다. 디자이너분과 소통하며 나중에 더 좋은 방향으로 수정할 수 있으면 좋겠다.

Contents

[ 이슈 ][ 해결방안 ][ 결과 ]

//app/src/main/res/values/styles.xml <style name="Theme.App.Starting" parent="Theme.SplashScreen"> <item name="android:windowIsTranslucent">true</item> <item name="postSplashScreenTheme">@style/AppTheme</item> // or other theme you want to use </style>

//MainActivity.java @Override protected void onCreate(Bundle savedInstanceState) { androidx.core.splashscreen.SplashScreen.installSplashScreen(this); // ☝️☝️☝️안보일 스플래시 스크린 org.devio.rn.splashscreen.SplashScreen.show(this, true); // ☝️☝️☝️만든 스플래시 스크린 super.onCreate(null); }