Implement Splash Screen For Kotlin and React Native The Right Way
Implement Splash Screen For Kotlin and React Native The Right Way
by on on android

Implement Splash Screen For Kotlin and React Native The Right Way

When you are just using react native to build any app, a time will come that it will be very necessary to change your splash due to you need to share, bundle it or upload it to google play store.

We are going to use a step by step procedure to do this, in case you have not done it for the first time, this is perfectly for you, no need to worry.

When changing a SplashScreen with react native, you need to make sure you have icons that you will use to do this, your icon can be any image but we need to convert it to drawables, which is going to be compatible with any device. Here is a link for you to convert your images to drawables using apetools webfusion.

After that download the zip generated files and place those folders with the generated icons inside your C:\Users\name\Desktop\Apps\my-android-projects\justquiz\android\app\src\main\res .

Now let's move on to the next step.

Go inside this path res/drawables and create a drawables resource file called splash_background.xml , after you have successfully done that, place this lines of code into it.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:drawable="@color/splash_background_color"/>
    <item
            android:width="50dp"
            android:height="50dp"
            android:drawable="@drawable/icon"
            android:gravity="center"/>
</layer-list>

The file above is the file which we will use to give our splash screen a height and a width, notice about the @drawable/icon which is referring to our icons in there respective drawables.

Now move over to colors.xml and add this line of code, which is going to allow us use a background color when our splash screen is opening.

<color name="splash_background_color">#2133A0</color>

Next goto styles.xml and add this line of code to it.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <item name="android:statusBarColor"> @color/splash_background_color</item>
    </style>
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="android:statusBarColor">@color/splash_background_color</item>
    </style>
</resources>

First we changed the statusBarColor with that color we defined earlier and then we create a special theme containing our splash_background and splash background style color.

android:statusBarColor requires API level 21 (current min is 16) 

In case you encounter this kind of error above just click on override resource in values-{API level} and that will automatically create a folder for you with same values for the current SDK you are working with your local machine.

Note: do not bother for all apps, everything will work just fine.

Next we create an activity, this activity will be used to launch our splash screen on application launch before it moves on to make use of the MainActivity. so here the splashScreenActivity, but before that create a file called SpalashScreenActivity inside the /app directory and add this lines of code into it.

package com.app;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class SplashScreenActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

We used the intent to quickly start the mainactivity class.

Now lastly let's make use of the splashscreen activity inside AndroidManifest file


 <activity
                android:name=".SplashScreenActivity"
                android:theme="@style/SplashTheme"
                android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
 </activity>

Once you have completed the above steps, your splash screen will be active.