Show a bootsplash during app startup. Hide it when you are ready.
version | react-native version |
---|---|
1.0.0+ | 0.60.0+ |
For 0.59-, you should use jetify -r
$ npm install --save react-native-bootsplash
# --- or ---
$ yarn add react-native-bootsplash
.xib
are supported (no .storyboard
or .launchImages
).
Edit the ios/YourProjectName/AppDelegate.m
file:
#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNBootSplash.h" // <- add the header import
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// …
[self.window makeKeyAndVisible];
[RNBootSplash show:@"LaunchScreen" inView:rootView]; // <- display the "LaunchScreen" xib view over our rootView
return YES;
}
- Create a
bootsplash.xml
file inandroid/app/src/main/res/drawable
(create the folder if necessary). You can customize this as you want.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<!-- the background color. it can be a system color or a custom one defined in colors.xml -->
<item android:drawable="@android:color/white" />
<item>
<!-- the app logo, centered horizontally and vertically -->
<bitmap
android:src="@mipmap/ic_launcher"
android:gravity="center" />
</item>
</layer-list>
- Edit the
android/app/src/main/java/com/yourprojectname/MainActivity.java
file:
import android.os.Bundle; // <- add necessary import
import com.facebook.react.ReactActivity;
import com.zoontek.rnbootsplash.RNBootSplash; // <- add necessary import
public class MainActivity extends ReactActivity {
// …
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
RNBootSplash.show(R.drawable.bootsplash, MainActivity.this); // <- display the "bootsplash" xml view 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.
- Edit the
android/app/src/main/res/values/styles.xml
file:
<resources>
<!-- Base application theme -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Your base theme customization -->
</style>
<!-- Add the following lines -->
<!-- BootTheme should inherit from AppTheme -->
<style name="BootTheme" parent="AppTheme">
<!-- set bootsplash.xml as activity background -->
<item name="android:background">@drawable/bootsplash</item>
</style>
</resources>
- Edit the
android/app/src/main/AndroidManifest.xml
file:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rnbootsplashexample">
<!-- … -->
<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">
<activity
android:name=".MainActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:label="@string/app_name"
android:windowSoftInputMode="adjustResize"
android:exported="true"><!-- add this line -->
<!-- remove the intent-filter from MainActivity -->
</activity>
<!-- add the following lines -->
<activity
android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
android:theme="@style/BootTheme"> <!-- apply the theme you created at step 3. -->
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<!-- … -->
</application>
</manifest>
import React, { useEffect } from "react";
import { Text } from "react-native";
import RNBootSplash from "react-native-bootsplash";
function App() {
let init = async () => {
// …do multiple async tasks
};
useEffect(() => {
init().finally(() => {
// without fadeout: RNBootSplash.hide()
RNBootSplash.hide({ duration: 250 });
});
}, []);
return <Text>My awesome app</Text>;
}
🤙 A more complex example is available in the /example
folder.
Because this package targets React Native 0.60+, you will probably don't need to link it. Otherwise if you follow all the previous steps and it still doesn't work, try to link this library manually:
Add this line to your ios/Podfile
file, then run pod install
.
target 'YourAwesomeProject' do
# …
pod 'RNBootSplash', :path => '../node_modules/react-native-bootsplash'
end
- 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')
- Add the implementation line to the dependencies in
android/app/build.gradle
:
dependencies {
// ...
implementation project(':react-native-bootsplash')
}
- Add the import and link the package in
MainApplication.java
:
import com.zoontek.rnbootsplash.RNBootSplashPackage; // <- add the RNBootSplashPackage import
public class MainApplication extends Application implements ReactApplication {
// …
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// …
packages.add(new RNBootSplashPackage());
return packages;
}
// …
}
🕵️♂️ 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). -
Instead of displaying the launch screen over the main
UIView
/Activity
, it will be displayed inside it. This prevents "jump" during transition (like in the example: horizontal & vertical centering using iOS auto layout or android gravity params will match perfectly the mounted component which uses{ alignItems: "center"; justifyContent: "center" }
to center its logo). -
It should not prevents you from seeing red screen errors.
-
Hiding the launch screen is configurable: fade it out with a custom duration or hide it without any animation at all (no fade needed if you want to animate it out!).