Skip to content
πŸš€ Show a bootsplash during app startup. Hide it when you are ready.
Java Objective-C JavaScript Ruby Python
Branch: master
Clone or download
Latest commit fea851c Oct 5, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Rename project Jul 2, 2019
android Fix build.gradle setup Sep 19, 2019
docs Update screenshots Jul 2, 2019
example Fix react dependency version Sep 19, 2019
ios Listen for RCTJavaScriptDidFailToLoadNotification at module init Sep 4, 2019
.editorconfig Fix build.gradle setup Sep 19, 2019
.npmignore Initial commit Jul 2, 2019
.prettierignore Initial commit Jul 2, 2019
.yarnrc Fix build.gradle setup Sep 19, 2019
CODEOWNERS Initial commit Jul 2, 2019
LICENSE Add LICENSE file Oct 5, 2019 Update version in compatibility table Aug 26, 2019
RNBootSplash.podspec Add the tvOS platform to the podspec file Sep 19, 2019
index.d.ts Rename project Jul 2, 2019
index.js Rename project Jul 2, 2019
package.json Fix react dependency version Sep 19, 2019
yarn.lock Fix react dependency version Sep 19, 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
1.0.0+ 0.60.0+

For 0.59-, you should use jetify -r


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



⚠️ Currently, only .xib are supported (no .storyboard or .launchImages).

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

    <!-- the app logo, centered horizontally and vertically -->
      android:gravity="center" />
  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=""

  <!-- … -->


      android:exported="true"><!-- add this line -->
      <!-- 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;

  // …

πŸ•΅οΈβ€β™‚οΈ Comparison 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.