Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-native-bootsplash
Advanced tools
Display a bootsplash on your app starts. Hide it when you want.
Show a splash screen during app startup. Hide it when you are ready.
For migration from the v5, 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.
$ 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
.
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-bootsplash generate --help
# --- or ---
$ yarn react-native-bootsplash generate --help
The command can take multiple arguments:
Usage: react-native-bootsplash generate [options] <logo>
Generate a launch screen using a logo file path (PNG or SVG)
Options:
--project-type <string> Project type ("detect", "bare" or "expo") (default: "detect")
--platforms <list> Platforms to generate for, separated by a comma (default: "android,ios,web")
--background <string> Background color (in hexadecimal format) (default: "#fff")
--logo-width <number> Logo width at @1x (in dp - we recommend approximately ~100) (default: 100)
--assets-output <string> Assets output directory path (default: "assets/bootsplash")
--flavor <string> Android flavor build variant (where your resource directory is) (default: "main")
--html <string> HTML template file path (your web app entry point) (default: "public/index.html")
--license-key <string> License key to enable brand and dark mode assets generation
--brand <string> Brand file path (PNG or SVG)
--brand-width <number> Brand width at @1x (in dp - we recommend approximately ~80) (default: 80)
--dark-background <string> [dark mode] Background color (in hexadecimal format)
--dark-logo <string> [dark mode] Logo file path (PNG or SVG)
--dark-brand <string> [dark mode] Brand file path (PNG or SVG)
-h, --help display help for command
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).
# Without license key
yarn react-native-bootsplash generate svgs/light-logo.svg \
--platforms=android,ios,web \
--background=F5FCFF \
--logo-width=100 \
--assets-output=assets/bootsplash \
--flavor=main \
--html=public/index.html
# With license key 🔑
yarn react-native-bootsplash generate svgs/light-logo.svg \
--platforms=android,ios,web \
--background=F5FCFF \
--logo-width=100 \
--assets-output=assets/bootsplash \
--flavor=main \
--html=public/index.html \
--license-key=xxxxx \
--brand=svgs/light-brand.svg \
--brand-width=80 \
--dark-background=00090A \
--dark-logo=svgs/dark-logo.svg \
--dark-brand=svgs/dark-brand.svg
This tool relies on the naming conventions that are used in the /example
project and will therefore create the following files:
# Without license key
android/app/src/main/res/drawable-mdpi/bootsplash_logo.png
android/app/src/main/res/drawable-hdpi/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.png
android/app/src/main/AndroidManifest.xml
android/app/src/main/res/values/colors.xml
android/app/src/main/res/values/styles.xml
ios/YourApp/BootSplash.storyboard
ios/YourApp/Colors.xcassets/BootSplashBackground-<hash>.colorset/Contents.json
ios/YourApp/Images.xcassets/BootSplashLogo-<hash>.imageset/Contents.json
ios/YourApp/Images.xcassets/BootSplashLogo-<hash>.imageset/logo-<hash>.png
ios/YourApp/Images.xcassets/BootSplashLogo-<hash>.imageset/logo-<hash>@2x.png
ios/YourApp/Images.xcassets/BootSplashLogo-<hash>.imageset/logo-<hash>@3x.png
ios/YourApp/Info.plist
ios/YourApp.xcodeproj/project.pbxproj
public/index.html
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…)
expo-splash-screen
autolinking (in your package.json
):"expo": {
"autolinking": {
"exclude": [
"expo-splash-screen"
]
}
}
app.json
:{
"expo": {
- "splash": {
- "image": "./assets/splash.png",
- "resizeMode": "contain",
- "backgroundColor": "#ffffff"
- },
+ "plugins": [
+ ["react-native-bootsplash", { "assetsDir": "assets/bootsplash" }]
+ ]
}
}
📌 The available plugins options are:
type PluginOptions = {
assetsDir?: string; // optional, default is "assets/bootsplash"
android?: {
parentTheme?: "TransparentStatus" | "EdgeToEdge"; // optional, default is `undefined` (`Theme.BootSplash`)
darkContentBarsStyle?: boolean; // optional, default is `undefined`
};
};
Edit the ios/YourApp/AppDelegate.mm
file:
#import "AppDelegate.h"
#import "RNBootSplash.h" // ⬅️ add the header import
// …
@implementation AppDelegate
// …
// ⬇️ Add this before file @end (for react-native 0.74+)
- (void)customizeRootView:(RCTRootView *)rootView {
[super customizeRootView:rootView];
[RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ initialize the splash screen
}
// OR
// ⬇️ Add this before file @end (for react-native < 0.74)
- (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
Edit your android/app/src/main/java/com/yourapp/MainActivity.{java,kt}
file:
// Java (react-native < 0.73)
// …
// 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); // super.onCreate(null) with react-native-screens
}
}
// Kotlin (react-native >= 0.73)
// …
// add these required imports:
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash
class MainActivity : ReactActivity() {
// …
override fun onCreate(savedInstanceState: Bundle?) {
RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
super.onCreate(savedInstanceState) // super.onCreate(null) with react-native-screens
}
}
Hide the splash screen (immediately, or with a fade out).
type hide = (config?: { fade?: boolean }) => Promise<void>;
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 <Text>My awesome app</Text>;
};
Return the current visibility status of the native splash screen.
type isVisible = () => Promise<boolean>;
import BootSplash from "react-native-bootsplash";
BootSplash.isVisible().then((value) => console.log(value));
A hook to easily create a 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).
type useHideAnimation = (config: {
ready?: boolean; // a boolean flag to delay the animate execution (default: true)
// the required generated assets
manifest: Manifest; // the manifest file is generated in your assets directory
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: ContainerProps;
logo: LogoProps;
brand: BrandProps;
};
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 (
<Animated.View {...container} style={[container.style, { opacity }]}>
<Image {...logo} />
{/* <Image {...brand} /> */}
</Animated.View>
);
};
const App = () => {
const [visible, setVisible] = useState(true);
return (
<View style={{ flex: 1 }}>
{/* content */}
{visible && (
<AnimatedBootSplash
onAnimationEnd={() => {
setVisible(false);
}}
/>
)}
</View>
);
};
This example is simple for documentation purpose (we only animate the container).
🤙 A more complex example is available in the /example
folder.
Edit your values/styles.xml
file to inherit from Theme.BootSplash.TransparentStatus
/ Theme.BootSplash.EdgeToEdge
instead of Theme.BootSplash
:
<resources>
<!-- … -->
<!-- make BootTheme inherit from Theme.BootSplash.TransparentStatus / Theme.BootSplash.EdgeToEdge -->
<style name="BootTheme" parent="Theme.EdgeToEdge">
<!-- … -->
<!-- optional, used to enforce the initial bars styles -->
<!-- default is true in light mode, false in dark mode -->
<item name="darkContentBarsStyle">true</item>
</style>
</resources>
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.
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 { NavigationContainer } from "@react-navigation/native";
import BootSplash from "react-native-bootsplash";
const App = () => (
<NavigationContainer
onReady={() => {
BootSplash.hide();
}}
>
{/* content */}
</NavigationContainer>
);
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().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:
{
"setupFiles": ["<rootDir>/jest/setup.js"]
}
This module is provided as is, I work on it in my free time.
If you or 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.
FAQs
Display a bootsplash on your app starts. Hide it when you want.
The npm package react-native-bootsplash receives a total of 92,012 weekly downloads. As such, react-native-bootsplash popularity was classified as popular.
We found that react-native-bootsplash demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.