Splash Screen using react-native-bootsplash

react-native-bootsplash is a library for React Native that provides a simple way to customize and display a splash screen (also known as a launch screen or splash screen) during the app's startup. The splash screen is the initial screen that users see when they launch your application.

1 . Installation:

First, you need to install the library in your React Native project using a package manager like npm or yarn:

npm install --save react-native-bootsplash && cd ios && pod install

# --- or ---

yarn add react-native-bootsplash && cd ios && pod install

2 . Put your splash screen logo into your desired folder and update the path with your path from the root directory.

yarn react-native generate-bootsplash assets/images/logo_ss.png \
  --platforms=android,ios \
  --background=#87CEEB

Note: Change assets/images/logo_ss.png with your logo location. --background will be your splash screen background. (SVG/PNG image are supported for eg: dummylogo.svg/dummylogo.png). For more advanced usage check here.

3 . iOS Setup:

a) Edit the ios/YourProjectName/AppDelegate.mm file: (REF->)

#import "AppDelegate.h"
#import "RNBootSplash.h" // ⬅️ add the header import

// …

@implementation AppDelegate

// …

// ⬇️ Add this before file @end
- (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
                          moduleName:(NSString *)moduleName
                           initProps:(NSDictionary *)initProps {
  UIView *rootView = [super createRootViewWithBridge:bridge
                                          moduleName:moduleName
                                           initProps:initProps];

  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ initialize the splash screen

  return rootView;
}

@end

b) Drag and drop the generated BootSplash.storyboard and go with the default selection in the popup that appears.

c) Set BootSplash.storyboard as Launch Screen File:

4 . Android setup:

a) Edit your android/app/src/main/res/values/styles.xml file: (REF->)

<resources>

  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
      <!-- Your base theme customization -->
  </style>

  <!-- BootTheme should inherit from Theme.BootSplash or Theme.BootSplash.EdgeToEdge -->
  <style name="BootTheme" parent="Theme.BootSplash">
    <item name="bootSplashBackground">@color/bootsplash_background</item>
    <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
    <item name="postBootSplashTheme">@style/AppTheme</item>
  </style>

</resources>

b) Edit your android/app/src/main/AndroidManifest.xml file: (REF->)

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

  <!-- … -->

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:theme="@style/AppTheme"> <!-- Apply @style/AppTheme on .MainApplication -->
    <activity
      android:name=".MainActivity"
      android:label="@string/app_name"
      android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
      android:launchMode="singleTask"
      android:windowSoftInputMode="adjustResize"
      android:exported="true"
      android:theme="@style/BootTheme"> <!-- Apply @style/BootTheme on .MainActivity -->
      <!-- … -->
    </activity>
  </application>
</manifest>

c) Finally edit your android/app/src/main/java/com/yourprojectname/MainActivity.java file:

// …

// add these required imports:
import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {

  // …

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this, R.style.BootTheme); // ⬅️ initialize the splash screen
    super.onCreate(savedInstanceState); // or super.onCreate(null) with react-native-screens
  }
}

or file:
android/app/src/main/java/com/rndevlearnnew/MainActivity.kt (REF->)

// Kotlin (react-native >= 0.73)
// …

// add these required imports:
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash

class MainActivity : ReactActivity() { {

  // …

  override fun onCreate(savedInstanceState: Bundle?) {
    RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
    super.onCreate(null) // or super.onCreate(null) with react-native-screens
  }
}

5 . Usage: (REF->)

import { useEffect } from "react";
import { Text } from "react-native";
import BootSplash from "react-native-bootsplash";

const App = () => {
  useEffect(() => {
    const init = async () => {
      // …do multiple sync or async tasks
    };

    init().finally(async () => {
      await BootSplash.hide({ fade: true });
      console.log("BootSplash has been hidden successfully");
    });
  }, []);

  return <Text>My awesome app</Text>;
};

import { NavigationContainer } from "@react-navigation/native";
import BootSplash from "react-native-bootsplash";

const App = () => (
  <NavigationContainer
    onReady={() => {
      BootSplash.hide();
    }}
  >
    {/* content */}
  </NavigationContainer>
);

6 . Output:

Blog

Splash Screen using react-native-bootsplash

Ajmal Hasan

Join Our Newsletter. No Spam, Only the good stuff.

Related