Splash Screen using react-native-bootsplash
Tags: reactnative, javascript, mobile
Published: 2023-12-02 06:15:00


[react-native-bootsplash](https://github.com/zoontek/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.png` with your logo location. `--background` will be your splash screen background. (SVG/PNG image are supported for eg: dummylogo.svg/dummylogo.png). For more advanced usage [check here](https://github.com/zoontek/react-native-bootsplash#setup).

3 . iOS Setup:

a) Edit the `ios/YourProjectName/AppDelegate.mm` file: ([REF->](https://github1s.com/Ajmal0197/RNDevLearnNew/blob/HEAD/ios/RNDevLearnNew/AppDelegate.mm))

```
#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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swbu3ince1jculfxpprl.png)

c) Set `BootSplash.storyboard` as Launch Screen File:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6v4jo79m10qtz7owef8i.png)


4 . Android setup:

a) Edit your `android/app/src/main/res/values/styles.xml` file: ([REF->](https://github1s.com/Ajmal0197/RNDevLearnNew/blob/HEAD/android/app/src/main/res/values/styles.xml))

```
<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->](https://github1s.com/Ajmal0197/RNDevLearnNew/blob/HEAD/android/app/src/main/AndroidManifest.xml))

```
<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->](https://github1s.com/Ajmal0197/RNDevLearnNew/blob/HEAD/android/app/src/main/java/com/rndevlearnnew/MainActivity.kt))

```
// 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
  }
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fo4c6aal8cvmpgteimn.png)


5 . Usage: ([REF->](https://github1s.com/Ajmal0197/RNDevLearnNew/blob/HEAD/src/srcMultilingual/App.jsx))

```
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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6b1b6p2obzrbvop47y9o.png)