Skip to content
πŸš€ Show a bootsplash during app startup. Hide it when you are ready.
Branch: master
Clone or download
Latest commit 9e6866f Jul 6, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Rename project Jul 2, 2019
android Rename project Jul 2, 2019
docs Update screenshots Jul 2, 2019
example Fix gif links on npm Jul 2, 2019
ios Rename project Jul 2, 2019
.editorconfig Initial commit Jul 2, 2019
.gitignore Initial commit Jul 2, 2019
.npmignore Initial commit Jul 2, 2019
.prettierignore Initial commit Jul 2, 2019
.prettierrc Initial commit Jul 2, 2019
CODEOWNERS Initial commit Jul 2, 2019 Update Jul 6, 2019
RNBootSplash.podspec Rename project Jul 2, 2019
index.d.ts Rename project Jul 2, 2019
index.js Rename project Jul 2, 2019
package.json Fix gif links on npm Jul 2, 2019
yarn.lock Rename project Jul 2, 2019

πŸš€ react-native-bootsplash

npm version npm Platform - Android and iOS MIT styled with prettier

Show a bootsplash during app startup. Hide it when you are ready.

iOS demo android demo


version react-native version
0.1.1+ 0.60.0+


$ npm install --save react-native-bootsplash
# --- or ---
$ yarn add react-native-bootsplash



Edit the ios/YourProjectName/AppDelegate.m file:

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#import "RNBootSplash.h" // <- add the header import

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  // …

  [self.window makeKeyAndVisible];
  [RNBootSplash show:@"LaunchScreen" inView:rootView]; // <- display the "LaunchScreen" xib view over our rootView
  return YES;


  1. Create a bootsplash.xml file in android/app/src/main/res/drawable (create the folder if necessary). You can customize this as you want.
<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="" android:opacity="opaque">
  <!-- the background color. it can be a system color or a custom one defined in colors.xml -->
  <item android:drawable="@android:color/white" />

  <item android:gravity="center">
    <!-- the app logo, centered horizontally and vertically -->
    <bitmap android:src="@mipmap/ic_launcher" />
  1. Edit the android/app/src/main/java/com/yourprojectname/ file:
import android.os.Bundle; // <- add necessary import

import com.facebook.react.ReactActivity;
import com.zoontek.rnbootsplash.RNBootSplash; // <- add necessary import

public class MainActivity extends ReactActivity {

  // …

  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);, MainActivity.this); // <- display the "bootsplash" xml view over our MainActivity

As Android will not create our main activity before launching the app, we need to display a different activity at start, then switch to our main one.

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

  <!-- Base application theme -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Your base theme customization -->

  <!-- Add the following lines -->
  <!-- BootTheme should inherit from AppTheme -->
  <style name="BootTheme" parent="AppTheme">
    <!-- set bootsplash.xml as activity background -->
    <item name="android:background">@drawable/bootsplash</item>

  1. Edit the android/app/src/main/AndroidManifest.xml file:
<manifest xmlns:android=""

  <!-- … -->


      <!-- remove the intent-filter from MainActivity -->

    <!-- add the following lines -->
      android:theme="@style/BootTheme"> <!-- apply the theme you created at step 3. -->
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />

    <!-- … -->



import React, { useEffect } from "react";
import { Text } from "react-native";
import RNBootSplash from "react-native-bootsplash";

function App() {
  let init = async () => {
    // …do multiple async tasks

  useEffect(() => {
    init().finally(() => {
      // without fadeout: RNBootSplash.hide()
      RNBootSplash.hide({ duration: 250 });
  }, []);

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

πŸ€™ A more complex example is available in the /example folder.

πŸ†˜ Manual linking

Because this package targets React Native 0.60+, you will probably don't need to link it. Otherwise if you follow all the previous steps and it still doesn't work, try to link this library manually:


Add this line to your ios/Podfile file, then run pod install.

target 'YourAwesomeProject' do
  # …
  pod 'RNBootSplash', :path => '../node_modules/react-native-bootsplash'


  1. Add the following lines to android/settings.gradle:
include ':react-native-bootsplash'
project(':react-native-bootsplash').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bootsplash/android')
  1. Add the implementation line to the dependencies in android/app/build.gradle:
dependencies {
  // ...
  implementation project(':react-native-bootsplash')
  1. Add the import and link the package in
import com.zoontek.rnbootsplash.RNBootSplashPackage; // <- add the RNBootSplashPackage import

public class MainApplication extends Application implements ReactApplication {

  // …

  protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // …
    packages.add(new RNBootSplashPackage());
    return packages;

  // …

πŸ•΅οΈβ€β™‚οΈ Comparaison with react-native-splash-screen

  • If react-native-splash-screen encourages you to display an image over your application, react-native-bootsplash way-to-go is to design your launch screen using platforms tools (Xcode layout editor and Android drawable resource).

  • Instead of displaying the launch screen over the main UIView / Activity, it will be displayed inside it. This prevents "jump" during transition (like in the example: horizontal & vertical centering using iOS auto layout or android gravity params will match perfectly the mounted component which uses { alignItems: "center"; justifyContent: "center" } to center its logo).

  • It should not prevents you from seeing red screen errors.

  • Hiding the launch screen is configurable: fade it out with a custom duration or hide it without any animation at all (no fade needed if you want to animate it out!).

You can’t perform that action at this time.