react-native-bootsplash is a library for React Native that provides a simple way to customize and display a splash screen (also known as a launch screen or splash screen) during the app's startup. The splash screen is the initial screen that users see when they launch your application.
1 . Installation:
First, you need to install the library in your React Native project using a package manager like npm or yarn:
npm install --save react-native-bootsplash && cd ios && pod install
# --- or ---
yarn add react-native-bootsplash && cd ios && pod install
2 . Put your splash screen logo into your desired folder and update the path with your path from the root directory.
yarn react-native generate-bootsplash assets/images/logo_ss.png \
--platforms=android,ios \
--background=#87CEEB
Note: Change
assets/images/logo_ss.pngwith your logo location.--backgroundwill be your splash screen background. (SVG/PNG image are supported for eg: dummylogo.svg/dummylogo.png). For more advanced usage check here.
3 . iOS Setup:
a) Edit the ios/YourProjectName/AppDelegate.mm file: (REF->)
#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
b) Drag and drop the generated BootSplash.storyboard and go with the default selection in the popup that appears.
c) Set BootSplash.storyboard as Launch Screen File:
4 . Android setup:
a) Edit your android/app/src/main/res/values/styles.xml file: (REF->)
<resources>
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Your base theme customization -->
</style>
<!-- BootTheme should inherit from Theme.BootSplash or Theme.BootSplash.EdgeToEdge -->
<style name="BootTheme" parent="Theme.BootSplash">
<item name="bootSplashBackground">@color/bootsplash_background</item>
<item name="bootSplashLogo">@drawable/bootsplash_logo</item>
<item name="postBootSplashTheme">@style/AppTheme</item>
</style>
</resources>
b) Edit your android/app/src/main/AndroidManifest.xml file: (REF->)
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<!-- … -->
<application
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"> <!-- Apply @style/AppTheme on .MainApplication -->
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true"
android:theme="@style/BootTheme"> <!-- Apply @style/BootTheme on .MainActivity -->
<!-- … -->
</activity>
</application>
</manifest>
c) Finally edit your android/app/src/main/java/com/yourprojectname/MainActivity.java file:
// …
// 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
}
}
or file:
android/app/src/main/java/com/rndevlearnnew/MainActivity.kt (REF->)
// 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(null) // or super.onCreate(null) with react-native-screens
}
}
5 . Usage: (REF->)
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>;
};
OR
import { NavigationContainer } from "@react-navigation/native";
import BootSplash from "react-native-bootsplash";
const App = () => (
<NavigationContainer
onReady={() => {
BootSplash.hide();
}}
>
{/* content */}
</NavigationContainer>
);
6 . Output:
Top comments (0)