DEV Community

Cover image for How to add Splash Screen in a React Native Android App? ๐ŸŒŸ
C M Pandey
C M Pandey

Posted on • Edited on

How to add Splash Screen in a React Native Android App? ๐ŸŒŸ

#reactnative #android #java #tutorial

Hi there!

The reason why you're here for this is probably that you couldn't find the correct, updated, and easiest solution to this till now!

But now, worry no more! You've arrived at the right place. I will layout all the steps over here, which I did to implement it within minutes! Let's get this thing started! ๐Ÿค˜

Step #1

Go to app/src/main/java/[packageName] and create a new file SplashActivity.java and copy-paste the following code inside it.

package com.packagename; // Replace this with your package name

import android.content.Intent;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}
Enter fullscreen mode Exit fullscreen mode

Step #2

Go to app/src/main/AndroidManifest.xml and modify it as follows to use SplashActivity:

Add the following activity inside the <application> tag.

<activity
    android:name=".SplashActivity"
    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>
Enter fullscreen mode Exit fullscreen mode

Remove the following intent from the MainActivity tag.

<intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
Enter fullscreen mode Exit fullscreen mode

And add android:exported="true" inside that activity.

Now, your AndroidManifest.xml should be looking like this:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.packagename">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">

      <activity
        android:name=".SplashActivity"
        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>

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true"
        >
      </activity>

      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>
Enter fullscreen mode Exit fullscreen mode

Step #3

Now, we will declare a SplashTheme for SplashActivity. Go to app/src/main/res/values/styles.xml and add the following style inside <resources>.

<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:background">@drawable/background_splash</item>
        <item name="android:statusBarColor">@color/background</item>
</style>
Enter fullscreen mode Exit fullscreen mode

Step #4

Go to android\app\src\main\res\values and create a file colors.xml if not present already.
We used a background color constant above, so we must add it to our colors.xml file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Insert your background color for the splash screen -->
    <color name="background">#fff</color>
</resources>
Enter fullscreen mode Exit fullscreen mode

Step #5

Go to android/app/src/main/res/drawable (create drawable folder if it doesn't exist already) and place your splash screen image (its's name should be splash_screen.png) here and also create a file background_splash.xml with the following code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/background" />
    <item
        android:drawable="@drawable/splash_screen"
        android:height="300dp"
        android:width="300dp"
        android:gravity="center"
    />
</layer-list>
Enter fullscreen mode Exit fullscreen mode

If the size of your splash screen is equal to the size of the device screen, then remove android:height and android:width from the above-mentioned <item> tag.

Step #6

Install react-native-splash-screen module in your project and then import SplashScreen from it in your App.js file.

import SplashScreen from 'react-native-splash-screen';
Enter fullscreen mode Exit fullscreen mode

We need to display the splash screen only till the first component is mounted, and to do that make a useEffect hook inside your App component body (before return) as follows:

Don't forget to import useEffect from 'react'.

useEffect(() => {
    SplashScreen.hide();
}, []);
Enter fullscreen mode Exit fullscreen mode

Step #7

Go to app/src/main/java/[packageName]/MainActivity.java and import the following modules above other imports.

import org.devio.rn.splashscreen.SplashScreen;
import android.os.Bundle;
Enter fullscreen mode Exit fullscreen mode

Add this method to the top of MainActivity class.

@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.style.SplashStatusBarTheme);
    super.onCreate(savedInstanceState);
}
Enter fullscreen mode Exit fullscreen mode

Step #8

Go to android/app/src/main/res/values/styles.xml to add SplashStatusBarTheme just like we did in Step #3.

<style name="SplashStatusBarTheme" parent="SplashScreen_SplashTheme">
        <item name="android:statusBarColor">@color/background</item>
</style>
Enter fullscreen mode Exit fullscreen mode

If you don't do this, then StatusBar will change color to black when the JS code of the app will load.

Step #9

Go to android/app/src/main/res/ and create a new folder layout (if it doesn't already exist). Inside that folder, create a file launch_screen.xml (this file is needed by react-native-splash-screen library). Inside that file, create a layout using the previously created background as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_splash" 
/>
Enter fullscreen mode Exit fullscreen mode

Step #10

Go to android/app/src/main/res/values/colors.xml and add the following tag just like we did in step #4, otherwise, the app will crash. Don't change the color value.

<color name="primary_dark">#000</color>
Enter fullscreen mode Exit fullscreen mode

And that's it! We did it! Your splash screen has been added to your app! Go and check it now! Thank me later! ๐Ÿ˜‰

Hope you learned something new from this! ๐Ÿ˜ƒ

PS: If you have any confusion or encounter any error while following the above-mentioned steps, then feel free to comment below, I will be happy to help you resolve it. ๐Ÿ˜Š

Have a nice day! ๐Ÿค—

Top comments (18)

Collapse
 
maskedman99 profile image
Rohit Prasad •

react-native-splash-screen is an unmaintained package ( github.com/crazycodeboy/react-nati... ). Try react-native-bootsplash instead ( github.com/zoontek/react-native-bo... )

Collapse
 
cmcodes profile image
C M Pandey •

Thanks for letting me know about this! I will switch to bootsplash soon and update this blog too! ๐Ÿ˜Š

Collapse
 
rahamin1 profile image
Yossi •

Thanks for this page! Any plans to update with bootsplash?

Collapse
 
subesharbadev profile image
Subesh Singh •

It did worked for me , but there is white screen coming after the splash screen. I have used the .hide() into componentDidMount().

componentDidMount() {
if (Platform.OS === 'android') {
BackHandler.addEventListener(
'hardwareBackPress',
this.onAndroidBackPress,
);
}
SplashScreen.hide();
}

Collapse
 
cmcodes profile image
C M Pandey •

I think you missed the step #6 where I mentioned the hide function. But, anyways it's good to know that it worked for you! ๐Ÿ˜Š

Collapse
 
subesharbadev profile image
Subesh Singh •

Liquid syntax error: Variable '{{ uri: {% raw %}' was not properly terminated with regexp: /\}\}/

Collapse
 
subesharbadev profile image
Subesh Singh •

Liquid syntax error: Variable '{{ uri: {% raw %}' was not properly terminated with regexp: /\}\}/

Collapse
 
subesharbadev profile image
Subesh Singh •

I did not missed the step #6 , actually white screen was coming after splash screen and before the content loaded properly. Now I have added an activity indicator while the site is being loaded. Thanks for this post.

Collapse
 
aneeskodappana profile image
Anees Kodappana •

@cmcodes Great, worked perfectly

Collapse
 
cmcodes profile image
C M Pandey •

Happy to know that it did! ๐Ÿ˜Š

Collapse
 
codeby profile image
code-by •

Is there possibility to add splash screen w/o any library?

Collapse
 
cmcodes profile image
C M Pandey •

I don't think so! There's no native support for that yet! Although, this library is pretty reliable. It hasn't caused any problem.

Collapse
 
happycodinglover profile image
Happy Coding Lover •

I have an issue
android\app\src\main\java\com\shippy\SplashActivity.java:5: error: package android.support.v7.app does not exist
import android.support.v7.app.AppCompatActivity;

How can I solve this?

Collapse
 
mofengfs profile image
I Know You Know •

Thx

Collapse
 
cmcodes profile image
C M Pandey •

Welcome! ๐Ÿ˜Š

Collapse
 
raphaelinyang profile image
Raphaelinyang •

didnt work for me, the app just loads for a few seconds then goes off

Collapse
 
cmcodes profile image
C M Pandey •

Have you followed all the steps correctly? Share some more details/ a GIF showing the actual preview would be better.

Collapse
 
xtealer profile image
XTEALER •

Worked really good on 2022 with few modifications. Only needed to set exported=false for new intent because android 12, everything else good!

View full discussion (18 comments)

Read next

shinetechsoftwareinc profile image

How to Add Competitiveness to Your Remote Development Team

Shinetech Software -

merqury14092 profile image

ะšะฐะบ ัƒะฑั€ะฐั‚ัŒ ะบะฐะฟะปัŽ ัะฝะธะทัƒ, ะบะพะณะดะฐ ะฝะฐะถะธะผะฐะตัˆัŒ ะฝะฐ BasicTextFiled

Anatoliy Petrakov -

kiolk profile image

Day 55. Copilot

Kiolk -

leandroveiga profile image

Mastering Error Handling in .NET 8: Strategies for Minimal APIs and Controllers

Leandro Veiga -