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

[Lomanu4]

When it comes to splash screens in React Native, a number of libraries exist—but react-native-splash-screen by

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

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

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

. 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:

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;

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);
}

// 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)
}

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


// import this
import org.devio.rn.splashscreen.SplashScreenReactPackage;

// Java
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new SplashScreenReactPackage() //here
);
}

// Kotlin
override fun getPackages():List<react<Pakage>> =
PackageList(this).package.apply{
add(SplashScreenReactPackage())
}

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>

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="

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

"
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>

Step 4: Fixing android error

4.1 Patch package

4.1.0 Install these packages


yarn add -D patch-package postinstall-postinstall

• 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
},

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
}

4.3 Apply Patch


npx patch-package react-native-splash-screen

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();
}, []);

Then build


cd android && ./gradlew clean && cd ..
npx react-native run-android

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

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.