I inherited a react-native project which is still in r&d phase and lacked the splash screen. Its original creator had less interest in dealing with the Android side and left it, therefore, mostly untouched.

For some reasons the app contained a splash screen on iOS, not sure whether this is by default there or it had been added by someone in XCode. In any case, because I started making an equivalent Android version, I thought, there should also be a splash screen.

Since the project is written in react-native I thought the best way to go on about is to implement it in react-native as well. And so I did. But when I tested the screen, I noticed a weird blank white screen that displays before my newly added splash screen would show for a short period of time.

My first thought was to get rid of it. And lo and behold there is a way. Add this line into your style-defintion in android/app/src/main/res/values/styles.xml:

<item name="android:windowDisablePreview">true</item>

Just for unknown reasons it just didn’t work. A different strategy needed to be taken: why not use that definition and create my splash screen there. Below are some steps to do that:

  1. Add your logo to a drawables/-folder (logo.png).
  2. Create splash screen definition in android/app/src/main/res/drawable/splash.xml. The below markup creates a layer of white (the background) on top of it and adds an item (to which we assign the logo) in the middle of the screen.
<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"></solid>
        </shape>
    </item>
    <item
        android:drawable="@drawable/logo"
        android:gravity="center"
        android:width="150dp"
        android:height="76dp"/>
</layer-list>
  1. In android/app/src/main/res/values/styles.xml, add your above defined splash definition to your style, like above when I tried to disable the white blank screen:
    <item name="android:windowBackground">@drawable/splash</item>

And voila, here it was.

PS. It took me a little of time to find a way centering an image in the screen (I unsuccessfully tried to use bitmap and other methods). I could well imagine that there are other ways of achieving that, but this solution here is good enough for me.