Neurological Phenomenon Multiplexer

    TypeScript icon, indicating that this package has built-in type declarations

    4.4.2 • Public • Published

    🚀 react-native-bootsplash

    Show a splash screen during app startup. Hide it when you are ready.
    For migration from the v3, check the guide.

    mit licence npm version npm downloads
    platform - android platform - ios

    iOS demo android demo


    This library helped you? Consider sponsoring!

    This module is provided as is, I work on it in my free time.

    If your company uses it in a production app, consider sponsoring this project 💰. You also can contact me for premium enterprise support, help with issues, prioritize bugfixes, feature requests, etc.


    version react-native version
    4.0.0+ 0.65.0+
    3.0.0+ 0.63.0+


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

    ⚠️  Don't forget going into the ios directory to execute a pod install.

    🆘 Manual linking

    Because this package targets React Native 0.65.0+, you probably don't need to link it manually. But if you have a special case, follow these additional instructions:

    👀 See manual linking instructions


    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;
      // …


    ℹ️ For react-native < 0.71 setup, follow the v4.4.0

    Assets generation

    In order to speed up the setup, we provide a CLI to generate assets, create the Android Drawable XML file and the iOS Storyboard file automatically .

    $ npx react-native generate-bootsplash --help
    # --- or ---
    $ yarn react-native generate-bootsplash --help

    The command can take multiple arguments:

    yarn react-native generate-bootsplash <logoPath>
    Generate a launch screen using an original logo file
      --background-color <color>  color used as launch screen background (in hexadecimal format) (default: "#fff")
      --logo-width <width>        logo width at @1x (in dp - we recommend approximately ~100) (default: 100)
      --assets-path [path]        path to your static assets directory (useful to require the logo file in JS)
      --flavor <flavor>           [android only] flavor build variant (outputs in an android resource directory other than "main")
      -h, --help                  output usage information

    Full command usage example

    yarn react-native generate-bootsplash assets/bootsplash_logo_original.png \
      --background-color=F5FCFF \
      --logo-width=100 \
      --assets-path=assets \

    Using an SVG

    You might want to use SVG as input file. For that, you can install a CLI tool to convert your logo first:

    $ brew install librsvg # available on macOS
    $ rsvg-convert -w 3000 bootsplash_logo.svg -o bootsplash_logo.png # create a large PNG with generous leeway for 4x Android xxxhdpi devices
    $ react-native generate-bootsplash bootsplash_logo.png
    $ rm bootsplash_logo.png # optionally, clean up the PNG

    This tool relies on the naming conventions that are used in the /example project and will therefore create the following files:

    # Only if --assets-path was specified
    android/app/src/main/res/values/colors.xml (creation and edition)


    ⚠️  Only .storyboard files are supported (Apple has deprecated other methods in April 2020).

    Edit the ios/YourProjectName/ file:

    #import "AppDelegate.h"
    #import "RNBootSplash.h" // <- add the header import
    @implementation AppDelegate
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
      self.moduleName = @"RNBootSplashExample";
      self.initialProps = @{};
      [super application:application didFinishLaunchingWithOptions:launchOptions];
      [RNBootSplash initWithStoryboard:@"BootSplash" rootView:self.window.rootViewController.view]; // <- initialization using the storyboard file name
      return YES;

    Set the BootSplash.storyboard as launch screen file:

    Drag and drop the file Create folder reference Set as Launch Screen File


    ⚠️  On Android >= 12, the splash screen will not appear if you start your app from the terminal / Android Studio. To see it, kill your app and restart it in normal conditions (tap on your app icon in the app launcher).

    1. Edit your android/app/build.gradle file:
    dependencies {
      implementation("androidx.core:core-splashscreen:1.0.0") // Add this line

    ⚠️  Don't forget going into the android directory to execute a ./gradlew clean && ./gradlew build (or perform a Gradle sync in Android Studio).

    1. Edit your android/app/src/main/res/values/styles.xml file:
      <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
          <!-- Your base theme customization -->
      <!-- BootTheme should inherit from Theme.SplashScreen -->
      <style name="BootTheme" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
        <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
        <item name="postSplashScreenTheme">@style/AppTheme</item>
    1. Edit your android/app/src/main/AndroidManifest.xml file:
    <manifest xmlns:android=""
        android:theme="@style/BootTheme"> <!-- Replace @style/AppTheme with @style/BootTheme -->
    1. Finally edit your android/app/src/main/java/com/yourprojectname/ file:
    // …
    // Add these required imports:
    import android.os.Bundle;
    import com.zoontek.rnbootsplash.RNBootSplash;
    public class MainActivity extends ReactActivity {
      // …
      protected void onCreate(Bundle savedInstanceState) {
        RNBootSplash.init(this); // <- initialize the splash screen
        super.onCreate(savedInstanceState); // or super.onCreate(null) with react-native-screens



    Method type

    type hide = (config?: { fade?: boolean; duration?: number }) => Promise<void>;

    Note: Only durations above 220ms are visually noticeable. Smaller values will be ignored and the default duration will be used.


    import RNBootSplash from "react-native-bootsplash";
    RNBootSplash.hide(); // immediate
    RNBootSplash.hide({ fade: true }); // fade with 220ms default duration
    RNBootSplash.hide({ fade: true, duration: 500 }); // fade with custom duration


    Method type

    type VisibilityStatus = "visible" | "hidden" | "transitioning";
    type getVisibilityStatus = () => Promise<VisibilityStatus>;


    import RNBootSplash from "react-native-bootsplash";
    RNBootSplash.getVisibilityStatus().then((status) => console.log(status));

    Real world example

    import React, { useEffect } from "react";
    import { Text } from "react-native";
    import RNBootSplash from "react-native-bootsplash";
    function App() {
      useEffect(() => {
        const init = async () => {
          // …do multiple sync or async tasks
        init().finally(async () => {
          await RNBootSplash.hide({ fade: true, duration: 500 });
          console.log("Bootsplash has been hidden successfully");
      }, []);
      return <Text>My awesome app</Text>;

    🤙 A more complex example is available in the /example folder.

    With React Navigation

    If you are using React Navigation, you can hide the splash screen once the navigation container and all children have finished mounting by using the onReady function.

    import React from "react";
    import { NavigationContainer } from "@react-navigation/native";
    import RNBootSplash from "react-native-bootsplash";
    function App() {
      return (
        <NavigationContainer onReady={() => RNBootSplash.hide()}>
          {/* content */}

    With react-native-bars

    In order to keep fully transparent status and navigation bars on Android once the splash screen is hidden (and control them), this library play nicely with react-native-bars. Check its README for more informations.

    Testing with Jest

    Testing code which uses this library requires some setup since we need to mock the native methods.

    To add the mocks, create a file jest/setup.js (or any other file name) containing the following code:

    jest.mock("react-native-bootsplash", () => {
      return {
        hide: jest.fn().mockResolvedValueOnce(),
        getVisibilityStatus: jest.fn().mockResolvedValue("hidden"),

    After that, we need to add the setup file in the jest config. You can add it under setupFiles option in your jest config file:

      "setupFiles": ["<rootDir>/jest/setup.js"]

    🕵️‍♂️ 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.
    • Hiding the launch screen is configurable: fade it out or hide it without any animation.


    npm i react-native-bootsplash

    DownloadsWeekly Downloads






    Unpacked Size

    102 kB

    Total Files


    Last publish


    • zoontek