DEV Community

Elozino Ovedhe
Elozino Ovedhe

Posted on

How to Add a Splash Screen in React Native - Fixing Android Build Issues with react-native-splash-screen

#reactnative #android #mobile

When it comes to splash screens in React Native, a number of libraries exist—but react-native-splash-screen by crazyboy continues to stand the test of time. While other tools get the job done, this library remains a favorite for one key reason: it's battle-tested and dependable.

Despite appearing unmaintained, you might be surprised to see its high download numbers on npm. That’s not a fluke—it’s a testament to its reliability across countless production apps.

So why do build errors still happen? Especially on Android?
Well, the Android team tends to move at lightning speed, frequently introducing breaking changes in the name of performance and security. This naturally causes some friction with older or less actively maintained libraries.

On iOS, things generally work smoothly as described in the readme. Android, however, can be trickier.

This guide is here to help.
We'll walk you through creating a rich splash screen experience using react-native-splash-screen and, more importantly, show you how to fix any Android build issues that may arise.

Let’s dive in.

Prerequisites

Make sure you have the following set up:

  • React Native environment (CLI or Expo with custom native code support via EAS)
  • Minimum React Native version: 0.70+
  • Android Studio properly configured (for Android builds)

Step 1:

Install react-native-splash-screen:

yarn add react-native-splash-screen:
Enter fullscreen mode Exit fullscreen mode

Step 2: Native Setup (Android)
Modify MainActivity.java or MainActivity.kt

  • Location: android/app/src/main/java/com/[yourapp]/MainActivity.kt

Add these imports at the top:

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

Then override onCreate:

// Java
@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.style.SplashScreenTheme, true);  // Show splash screen defined in you android `styles.xml`
    super.onCreate(savedInstanceState);
}
Enter fullscreen mode Exit fullscreen mode 
// Kotlin
override fun onCreate(savedInstanceState: Bundle?){
  SplashScreen.show(this, R.style.SplashScreenTheme, true);   // Show splash screen defined in you android `styles.xml`
super.onCreate(savedInstanceState)
}
Enter fullscreen mode Exit fullscreen mode

Modify MainApplication.java or MainApplication.kt to use react-native-splash-screen via the following changes:

// import this
import org.devio.rn.splashscreen.SplashScreenReactPackage;
Enter fullscreen mode Exit fullscreen mode 
// Java
 @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //here
            );
        }
Enter fullscreen mode Exit fullscreen mode 
// Kotlin
override fun getPackages():List<react<Pakage>> = 
PackageList(this).package.apply{
add(SplashScreenReactPackage())
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Add Splash Theme

  • Location: android/app/src/main/res/values/styles.xml 
<style name="SplashTheme" parent="SplashScreen_SplashTheme">
    <item name="android:windowBackground">@drawable/launch_screen</item>
</style>
Enter fullscreen mode Exit fullscreen mode

Create a drawable XML for the splash image:
Location: android/app/src/main/res/layout/launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>
Enter fullscreen mode Exit fullscreen mode

Step 4: Fixing android error

4.1 Patch package

4.1.0 Install these packages

yarn add -D patch-package postinstall-postinstall
Enter fullscreen mode Exit fullscreen mode
  • In your package.json file 
"scripts": {
...
    "postinstall": "patch-package" // add this in package.json
  },
  "devDependencies": {
    "patch-package": "^8.0.0", // make sure this here
    "postinstall-postinstall": "^2.1.0" // make sure this here
  },
Enter fullscreen mode Exit fullscreen mode

4.2 Modify your react-native-splash-screen in your node_modules
Locate /node_modules/react-native-splash-screen/android/build and replace with this

dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
     testImplementation 'junit:junit:4.12'
     implementation "com.facebook.react:react-native:+" // From node_modules
 }
Enter fullscreen mode Exit fullscreen mode

4.3 Apply Patch

npx patch-package react-native-splash-screen
Enter fullscreen mode Exit fullscreen mode

Hide Splash After App Loads
In your main JavaScript entry point (usually App.js or index.js), hide the splash screen once your app is ready:

import SplashScreen from 'react-native-splash-screen';

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

Then build

cd android && ./gradlew clean && cd ..
npx react-native run-android
Enter fullscreen mode Exit fullscreen mode

iOS Setup (Quick Overview)
iOS setup is typically straightforward and covered well in the library’s README.

  • Add the splash screen in your LaunchScreen.storyboard (Xcode)
  • No extra native code changes needed

DEMO REPO

Top comments (0)