Display a bootsplash on your app starts. Hide it when you want.
npm install react-native-simplified-bootsplashShow a splash screen during app startup. Hide it when you are ready.
For migration from the v4, check the MIGRATION.md guide.







This library follows the React Native releases support policy.
It is supporting the latest version and the two previous minor series.
``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._
Because this package targets recent React Native versions, 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.
`bash`
target 'YourAwesomeProject' do
# …
pod 'RNBootSplash', :path => '../node_modules/react-native-bootsplash'
end
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
@SuppressWarnings("UnnecessaryLocalVariable")
List
// …
packages.add(new RNBootSplashPackage());
return packages;
}
// …
}
`
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
Usage: react-native generate-bootsplash [options]
Generate a launch screen using a logo file path (PNG or SVG)
Options:
--platforms Platforms to generate for, separated by a comma (default: "android,ios,web")
--background
--logo-width
--assets-output
--flavor
--html
--license-key
--brand
--brand-width
--dark-background
--dark-logo
--dark-brand
-h, --help display help for command
`
#### 💪 Unlock the CLI full potential
In order to use the --brand, --brand-width and --dark-* options, you must specify a --license-key.
With it, the generator is able to output over 50 files (logo and brand images generated in all pixel densities, dark mode versions, etc.), saving you (and your company!) a massive amount of time not only at creation, but also at each adjustment ⏱️
_📍 This license key grants unlimited and unrestricted usage of the generator for the buyer's purposes (meaning you can execute the assets generation as much as you want)._
#### Full command usage example
`bashWithout license key
yarn react-native generate-bootsplash svgs/light_logo.svg \
--platforms=android,ios,web \
--background=F5FCFF \
--logo-width=100 \
--assets-output=assets \
--flavor=main \
--html=index.html
This tool relies on the naming conventions that are used in the
/example project and will therefore create the following files:`bash
Without license key
android/app/src/main/res/values/colors.xml
android/app/src/main/res/drawable-hdpi/bootsplash_logo.png
android/app/src/main/res/drawable-mdpi/bootsplash_logo.png
android/app/src/main/res/drawable-xhdpi/bootsplash_logo.png
android/app/src/main/res/drawable-xxhdpi/bootsplash_logo.png
android/app/src/main/res/drawable-xxxhdpi/bootsplash_logo.pngios/RNBootSplashExample/BootSplash.storyboard
ios/RNBootSplashExample/Images.xcassets/BootSplashLogo.imageset/Contents.json
ios/RNBootSplashExample/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo.png
ios/RNBootSplashExample/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@2x.png
ios/RNBootSplashExample/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@3x.png
index.html
Only if --assets-output was specified
assets/bootsplash_manifest.json
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+ Over 40 files with license key 🔑 (brand images, dark mode versions…)
`
$3
_ℹ️ For
react-native < 0.71 setup, follow the v4.4.0 README.md._---
1. Edit the
ios/YourProjectName/AppDelegate.mm file:`obj-c
#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
`2. Drag and drop the generated
BootSplash.storyboard (and Colors.xcassets, when using dark mode):
3. Create folder references:

4. Set
BootSplash.storyboard as Launch Screen File:
$3
1. Edit your
android/app/src/main/res/values/styles.xml file:`xml
`2. Edit your
android/app/src/main/AndroidManifest.xml file:`xml
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/BootTheme">
`3. Finally edit your
android/app/src/main/java/com/yourprojectname/MainActivity.java file:`java
// …// 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
}
}
`API
$3
Hide the splash screen (immediately, or with a fade out).
#### Method type
`ts
type hide = (config?: { fade?: boolean }) => Promise;
`#### Usage
`tsx
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 My awesome app ;
};
`$3
Return the current visibility status of the native splash screen.
#### Method type
`ts
type isVisible = () => Promise;
`#### Usage
`ts
import BootSplash from "react-native-bootsplash";RNBootSplash.isVisible().then((value) => console.log(value));
`$3
A hook to easily creation a hide custom hide animation, by animating all splash screen elements using
Animated, react-native-reanimated or else (similar as the video on top of this documentation).
To use it, don't forget to set the --assets-output option of the generator as it requires the manifest and assets images files.#### Method type
`ts
type useHideAnimation = (config: {
manifest: Manifest; // the manifest file is generated when --assets-output is specified // the required generated assets
logo: ImageRequireSource;
darkLogo?: ImageRequireSource;
brand?: ImageRequireSource;
darkBrand?: ImageRequireSource;
// specify if you are using translucent status / navigation bars
// in order to avoid a shift between the native and JS splash screen
statusBarTranslucent?: boolean;
navigationBarTranslucent?: boolean;
animate: () => void;
}) => {
container: ViewProps;
logo: ImageProps;
brand?: ImageProps;
};
`#### Usage
`tsx
import { useState } from "react";
import { Animated, Image } from "react-native";
import BootSplash from "react-native-bootsplash";type Props = {
onAnimationEnd: () => void;
};
const AnimatedBootSplash = ({ onAnimationEnd }: Props) => {
const [opacity] = useState(() => new Animated.Value(1));
const { container, logo /, brand / } = BootSplash.useHideAnimation({
manifest: require("../assets/bootsplash_manifest.json"),
logo: require("../assets/bootsplash_logo.png"),
// darkLogo: require("../assets/bootsplash_dark_logo.png"),
// brand: require("../assets/bootsplash_brand.png"),
// darkBrand: require("../assets/bootsplash_dark_brand.png"),
statusBarTranslucent: true,
navigationBarTranslucent: false,
animate: () => {
// Perform animations and call onAnimationEnd
Animated.timing(opacity, {
useNativeDriver: true,
toValue: 0,
duration: 500,
}).start(() => {
onAnimationEnd();
});
},
});
return (
{/ {brand && } /}
);
};
const App = () => {
const [visible, setVisible] = useState(true);
return (
{/ content /}
{visible && (
onAnimationEnd={() => {
setVisible(false);
}}
/>
)}
);
};
`This example is simple for documentation purpose (we only animate the container).
🤙 A more complex example is available in the
/example folder.FAQ
$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.`tsx
import { NavigationContainer } from "@react-navigation/native";
import BootSplash from "react-native-bootsplash";const App = () => (
onReady={() => {
BootSplash.hide();
}}
>
{/ content /}
);
`$3
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:`ts
jest.mock("react-native-bootsplash", () => {
return {
hide: jest.fn().mockResolvedValue(),
isVisible: jest.fn().mockResolvedValue(false),
useHideAnimation: jest.fn().mockReturnValue({
container: {},
logo: { source: 0 },
brand: { source: 0 },
}),
};
});
`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
For the sake of simplicity. Since the light and dark versions of your assets are likely identical (except for the colors), if your
index.html file is compressed with gzip, the size difference will be negligible.$3
Edit your
values/styles.xml to set android:statusBarColor and android:windowLightStatusBar values:`diff
-
+
`$3
Edit your
values/styles.xml file to use Theme.BootSplash.EdgeToEdge instead of Theme.BootSplash:`diff
-