Change splash screen in React Native Android app

This how it looks like at my app

I’m new at making react-native apps, but have a lot of experience in Web and Android. When i got this problem i was thinking that it already solved in many ways, but what was my surprise when i couldn’t find any working example.

At first i tried to solve this problem inside react-native framework, but then realized that problem outside of it in native loader of js app. Basically you just need to add some styling to the base Android Them, and that’s all.

Here is how to make this

1. You need to create splash screen in res/drawable. Let’s call it splash_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/gray"/>

    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher"/>
    </item>

</layer-list>

2. Now you need to update res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>
    <style name="SplashTheme" parent="AppTheme">
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>
</resources>

3. Now open AndroidManifest.xml and replace AppTheme on SplashThem on MainActivity

<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:theme="@style/SplashTheme"
      android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
</activity>

We use SplashTheme instead of updating AppTheme, to add this background only to start activity and leave other stuff without changes.

4. Don’t forget to set background for your root view. This need because Splash screen is always under your js views. So if not set background it will be visible.

You can see how it looks like on my react-native app

That’s all folks. I hope this article was useful to you.

PS: For iOS app there is another good article here