🚀 react-native-bootsplash

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




Support

| version | react-native version |
| ------- | -------------------- |
| 3.0.0+ | 0.63.0+ |
| 2.0.0+ | 0.60.0+ |

For 0.59-, you should use jetify -r

Installation

``bash
$ 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.60.0+, you will probably don't need to link it manually. Otherwise if it's not the case, follow this additional instructions:

👀 See manual linking instructions

$3

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

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

$3

1. Add the following lines to android/settings.gradle:

`gradle
include ':react-native-bootsplash'
project(':react-native-bootsplash').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bootsplash/android')
`

2. Add the implementation line to the dependencies in android/app/build.gradle:

`gradle
dependencies {
// ...
implementation project(':react-native-bootsplash')
}
`

3. Add the import and link the package in MainApplication.java:

`java
import com.zoontek.rnbootsplash.RNBootSplashPackage; // <- add the RNBootSplashPackage import

public class MainApplication extends Application implements ReactApplication {

// …

@Override
protected List getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List packages = new PackageList(this).getPackages();
// …
packages.add(new RNBootSplashPackage());
return packages;
}

// …
}
`

Setup

$3

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 ✨.

`bash
$ npx react-native generate-bootsplash --help


--- or ---


$ yarn react-native generate-bootsplash --help
`

The command can take multiple arguments:

`bash
react-native generate-bootsplash

Generate a launch screen using an original logo file

Options:
--background-color color used as launch screen background (in hexadecimal format) (default: "#fff")
--logo-width logo width at @1x (in dp - we recommand approximately ~100) (default: 100)
--assets-path [path] path to your static assets directory (useful to require the logo file in JS)
--flavor [android only] flavor build variant (outputs in an android resource directory other than "main")
-h, --help output usage information
`

#### Full command usage example

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

![](https://raw.githubusercontent.com/zoontek/react-native-bootsplash/master/docs/cli_tool.png?raw=true)

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

`bash
android/app/src/main/res/drawable/bootsplash.xml
android/app/src/main/res/values/colors.xml (creation and edition)
android/app/src/main/res/mipmap-hdpi/bootsplash_logo.png
android/app/src/main/res/mipmap-mdpi/bootsplash_logo.png
android/app/src/main/res/mipmap-xhdpi/bootsplash_logo.png
android/app/src/main/res/mipmap-xxhdpi/bootsplash_logo.png
android/app/src/main/res/mipmap-xxxhdpi/bootsplash_logo.png

ios/YourProjectName/BootSplash.storyboard
ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo.png
ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@2x.png
ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@3x.png

Only if --assets-path was specified


assets/bootsplash_logo.png
assets/bootsplash_logo@1,5x.png
assets/bootsplash_logo@2x.png
assets/bootsplash_logo@3x.png
assets/bootsplash_logo@4x.png
`

$3

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

Edit the ios/YourProjectName/AppDelegate.m file:

`obj-c
#import "AppDelegate.h"

#import
#import
#import

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

@implementation AppDelegate

- (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions
{
// …
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];

[RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // <- 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 |
| ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| ![](https://raw.githubusercontent.com/zoontek/react-native-bootsplash/master/docs/xcode-1.png?raw=true) | ![](https://raw.githubusercontent.com/zoontek/react-native-bootsplash/master/docs/xcode-2.png?raw=true) | ![](https://raw.githubusercontent.com/zoontek/react-native-bootsplash/master/docs/xcode-3.png?raw=true) |

$3

1. Edit the android/app/src/main/java/com/yourprojectname/MainActivity.java file:

`java
import android.os.Bundle; // <- add this necessary import

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

public class MainActivity extends ReactActivity {

// …

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
RNBootSplash.init(R.drawable.bootsplash, MainActivity.this); // <- display the generated bootsplash.xml drawable 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.

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

`xml









`

3. Edit the android/app/src/main/AndroidManifest.xml file:

`xml
package="com.rnbootsplashexample">

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

android:name=".MainActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
android:label="@string/app_name"
android:windowSoftInputMode="adjustResize"
android:exported="true"
android:launchMode="singleTask">





android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
android:theme="@style/BootTheme"
android:launchMode="singleTask">







`

API

$3

#### Method type

`ts
type hide = (config?: { fade?: boolean }) => Promise;
`

#### Usage

`js
import RNBootSplash from "react-native-bootsplash";

RNBootSplash.hide(); // immediate
RNBootSplash.hide({ fade: true }); // fade
`

---

$3

#### Method type

`ts
type show = (config?: { fade?: boolean }) => Promise;
`

#### Usage

`js
import RNBootSplash from "react-native-bootsplash";

RNBootSplash.show(); // immediate
RNBootSplash.show({ fade: true }); // fade
`

---

$3

#### Method type

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

#### Usage

`js
import RNBootSplash from "react-native-bootsplash";

RNBootSplash.getVisibilityStatus().then((status) => console.log(status));
`

Real world example

`js
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 });
console.log("Bootsplash has been hidden successfully");
});
}, []);

return My awesome app;
}
`

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

Guides

$3

If you want to correctly handle deep linking with this package, you should edit the android/app/src/main/AndroidManifest.xml file like this:

`xml
package="com.rnbootsplashexample">

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

android:name=".MainActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
android:label="@string/app_name"
android:windowSoftInputMode="adjustResize"
android:exported="true"
android:launchMode="singleTask">




android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
android:theme="@style/BootTheme"
android:launchMode="singleTask">















`

$3

Testing code which uses this library required 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:

`js
jest.mock("react-native-bootsplash", () => {
return {
hide: jest.fn().mockResolvedValueOnce(),
show: 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:

`json
{
"setupFiles": ["/jest/setup.js"]
}
`

$3

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.

`js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import RNBootSplash from "react-native-bootsplash";

function App() {
return (
RNBootSplash.hide()}>
{/ content /}

);
}
`

🕵️‍♂️ 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).

- It should not prevent you from seeing red screen errors.

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