React Native Splash Screen on Android 12

Question

I am using react-native-splash-screen library for making my custom splash screen in the app from an image on both iOS and Android.

However, Google introduced the new splash screens approach in Android 12, which causes problems such as splash screen duplicating, lack of customisation and the need to migrate to this new implementation removing the old screen.

I like my old splash screen and don't want to remove it, moreover I've seen that the Instagram app (which is on React Native also) seems to use not Android 12 native splash, but the custom one, so there definitely should be a way to achieve this.

So how can I leave my custom implementation accurately the same without any problems with performance and with the ability to use the full screen image like it was earlier?

Answer 1

It was quite easy indeed to configure my old implementation for Android 12 and leave it with the same behavior: First, change you app/build.gradle file with the following:

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

Then, add this style to your styles:

<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>

In the AndroidManifest.xml change the theme of your main activity:

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

The last step: in the MainActivity.java change:

@Override
  protected void onCreate(Bundle savedInstanceState) {
    androidx.core.splashscreen.SplashScreen.installSplashScreen(this); // native splash screen which will be skipped
    org.devio.rn.splashscreen.SplashScreen.show(this, true); // custom splash screen from react-native-splash-screen library
    super.onCreate(null);
  }

This will keep your custom splash screen implementation and, which is more important, the custom design ability. I made so in my app and everything works perfect, my app is opening immediately and right away with the custom image splash.

P.S. I have an opinion that Instagram uses the same hack, as the Instagram app (which is in React Native and probably uses this library) opens with its custom splash on Android 12, not the native one.

Answer 2

This problem is due to default splash screen in Android 12. To resolve it you can replace the default splash screen with a transparent screen by adding this code:

true

Go to res/values/styles.xml and edit the file like this.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    <item name="android:windowIsTranslucent">true</item> // add this line
</style>

Source: https://github.com/crazycodeboy/react-native-splash-screen/issues/613#issuecomment-1538231552