Create custom splash screen in react native application

How to Create a Custom Splash Screen in React Native

A splash screen is the first thing users see when they launch your app—it sets the tone and can even improve perceived performance. In this post, we’ll guide you through creating a custom splash screen in React Native for both Android and iOS.

Whether you're aiming for branding, a loading animation, or just a sleek entry point, we've got you covered.

Tools and Libraries Required

• React Native (v0.60+)
• react-native-bootsplash (Optional - To mannually hide splash screen and to create a splash screen from an image)

Before diving into code, prepare your splash image or animation. Ideally, use a high-resolution image centered on a solid background.

You’ll need:

• A splash image (typically PNG)
• A background color (hex or RGB)

Generating a splash screen

If you do not have a splash screen, and want to generate it using a logo or image. Perform the below steps

• Run the below command to install required library.

npm install react-native-splash-screen 

• Run the below command to generate the image

npx react-native generate-bootsplash assets/bootsplash_logo.png \   <== path of your image file
  --platforms=android,ios,web \
  --background=007200 \
  --logo-width=300 \
  --assets-output=assets/bootsplash \    <= output file path
  --flavor=main \
  --html=public/index.html

Android Implementation

1. Add Your Splash Image

Place your splash image in:

android/app/src/main/res/drawable/splash_screen.png

2. Create a Splash Theme

Edit android/app/src/main/res/values/styles.xml:

<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
</style>

3. Set Splash Theme in AndroidManifest.xml

Change the theme of your MainActivity:

<activity
  android:name=".MainActivity"
  android:theme="@style/SplashTheme"
  ... >

4. Hide Splash Screen Manually (Optional)

Use react-native-bootsplash to hide splash screen mannually, you will need to perform the following 

• Edit android/app/src/main/res/values/styles.xml as follows:

<style name="BootTheme" parent="Theme.BootSplash">
        <item name="bootSplashBackground">#007200</item>  //<= background color of splash screen
        <item name="bootSplashLogo">@drawable/splash_screen</item>
        <item name="postBootSplashTheme">@style/AppTheme</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>

Change the theme of your MainActivity inside AndroidManifest.xml file.

<activity
  android:name=".MainActivity"
  android:theme="@style/BootTheme"
  ... >

• In MainActivity.java, add:

import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash

class MainActivity : ReactActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
        RNBootSplash.init(this, R.style.SplashTheme)
        super.onCreate(savedInstanceState)
      }
 }

Then, in your React Native code (e.g., App.js), add the below code to hide splash screen mannually.

import BootSplash from "react-native-bootsplash";
useEffect(() => {
  await BootSplash.hide({ fade: true });
}, []);

And that’s it! You’ve now built a custom splash screen in React Native that works smoothly. A polished launch screen gives your app a professional feel and improves perceived performance, especially on slower devices.