Best React Native splash screen libraries
Tags: reactnative, webdev
Published: 2023-07-20 19:34:13

**Written by [Onuorah Bonaventure](https://blog.logrocket.com/author/onuorahbonaventure/)✏️**

A splash screen is the first screen that pops up when a mobile application launches. It can be set to cover the entire screen or just a portion of the screen. 

A splash screen is an important part of a mobile app, as it can help boost user experience. It can contain an image, icon, or an important detail about the app — like the version. 

In this article, we’ll investigate four libraries, and some associated tools, that can be used to add splash screens to mobile apps. For each library, we’ll look at its advantages and disadvantages and then walk through the process of using the library to prepare, set up and launch a splash screen. 

As a bonus, we’ll examine app icon guidelines for mobile devices, demonstrate how to generate and set app icons, and how to provide a custom name for a mobile application. 

Here’s the default splash screen for React Native applications. Each time we create a new React Native app, this is the splash screen that we’ll see until we set a new one: 

![Gallery image](https://blog.logrocket.com/wp-content/uploads/2023/07/ios-mobile-device-default-splash-screen.gif?w=150&h=150&crop=1)

![Gallery image 2](https://blog.logrocket.com/wp-content/uploads/2023/07/android-default-splash-screen.gif?w=150&h=150&crop=1)

_Jump ahead:_

*   [Creating splash screens with React Native Bootsplash](#react-native-bootsplash)
*   [Creating splash screens with React Native Splash Screen](#react-native-splash-screen)
*   [Creating splash screens with Obit Animated Splash Screen](#obit-animated-splash-screen)
*   [Creating splash screens with Expo Splash Screen](#expo-splash-screen)
*   [Guidelines for mobile app icons](#guidelines-mobile-app-icons)
*   [How to set up an app icon](#how-to-set-up-app-icon)
*   [How to set a mobile app name](#how-to-set-mobile-app-name)

## React Native Bootsplash

The [React Native Bootsplash](https://github.com/zoontek/react-native-bootsplash) library is a great option for adding splash screens and app icons to mobile applications. It comes with a CLI that can be leveraged to generate a splash screen and app icons on the fly. Let’s take a closer look.

### Pros of using React Native Bootsplash

*   Comes with a CLI assets generator
*   Its assets generator can be used to generate different sizes of app icons
*   Its assets generator can be used to create appropriately sized splash screens and to customize the splash screen with a command on the CLI
*   Its CLI automatically generate an Android drawable XML file
*   Its CLI automatically generates iOS Storyboard file
*   Allows the user to specify the splash screen duration
*   Its APIs allow us to easily perform tests using libraries like Jest
*   Has a relatively small bundle size of 132kB

### Cons of using React Native Bootsplash

*   Actively developed by a solo developer and has very few contributors
*   Users must configure the splash screens for Android and iOS
*   Has a lengthy configuration and requires the use of Xcode for iOS
*   Only supports PNG and SVG files
*   Does not allow GIFs or animations
*   Cannot be used with the Expo CLI

### Preparing the React Native Bootsplash splash screen

To prepare a splash screen with the React Native Bootsplash library, you’ll need a 4096px x 4096px image. If you’re having difficulty sourcing an image, you can [click here](https://raw.githubusercontent.com/bonarhyme/React-Native-Bootsplash-splash-screen/master/assets/dog.png) to download the one I have already generated. Or, you can just follow along.

### How to set up React Native Bootsplash <a name="how-to-set-mobile-app-name">

To use the React Native Bootsplash library, you’ll need to open an existing React Native application or [follow this guide](https://blog.logrocket.com/complete-guide-react-native-web/) to set up a new React Native app. Alternatively, you can clone the complete source code for this project on [GitHub](https://github.com/bonarhyme/React-Native-Bootsplash-splash-screen/tree/master). 

When you start up your app, you’ll see a blank, white screen displayed before the app content. The next step is to install the [react-native-bootsplash](https://github.com/zoontek/react-native-bootsplash#installation) [CLI](https://github.com/zoontek/react-native-bootsplash#installation) using one of the following commands:

```bash
$ npm install react-native-bootsplash
# --- or --- 
$ yarn add react-native-bootsplash
```

Now, create an `assets` folder in the root directory and add the rectangular PNG or SVG image or logo that you’d like to use as the splash screen. For this example, I’ll be using this [dog image](https://www.freepik.com/free-vector/cute-shiba-inu-dog-sitting-cartoon-vector-icon-illustration-animal-nature-icon-concept-isolated-premium-vector-flat-cartoon-style_17562613.htm#from_view=detail_alsolike) [from](https://www.freepik.com/free-vector/cute-shiba-inu-dog-sitting-cartoon-vector-icon-illustration-animal-nature-icon-concept-isolated-premium-vector-flat-cartoon-style_17562613.htm#from_view=detail_alsolike) [catalyststuff on Freepik](https://www.freepik.com/free-vector/cute-shiba-inu-dog-sitting-cartoon-vector-icon-illustration-animal-nature-icon-concept-isolated-premium-vector-flat-cartoon-style_17562613.htm#from_view=detail_alsolike). 

Now, run the code in the terminal to generate the splash screens and app icons:

```bash
// Terminal

// npx react-native generate-bootsplash <logoPath>

 npx react-native generate-bootsplash ./assets/dog.png \
  --background-color=36dbff \
--width=200
```

If the generation works successfully, it will generate the following files for Android and iOS:

```xml
// Path to generated files

    Android
 android/app/src/main/res/values/colors.xml
 android/app/src/main/res/mipmap-mdpi/bootsplash_logo.png (288x288)
 android/app/src/main/res/mipmap-hdpi/bootsplash_logo.png (432x432)
 android/app/src/main/res/mipmap-xhdpi/bootsplash_logo.png (576x576)
 android/app/src/main/res/mipmap-xxhdpi/bootsplash_logo.png (864x864)
 android/app/src/main/res/mipmap-xxxhdpi/bootsplash_logo.png (1152x1152)

    iOS
 ios/splashA/BootSplash.storyboard
 ios/splashA/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo.png (100x150)
 ios/splashA/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@2x.png (200x300)
 ios/splashA/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@3x.png (300x450)
```

In this example, `splashA` is the name assigned to the React Native application because the package relies on the naming convention used in the project. If your project is named `awesomeApp`, that will be the name assigned to the app. Later in the article, we’ll discuss how to specify a different name for your app. 

If you wish to customize your app’s output, use the following [command](https://github.com/zoontek/react-native-bootsplash#assets-generation):

```bash
// Terminal 

yarn react-native generate-bootsplash ./assets/dog.png \
  --background-color=color \
  --logo-width=width \
  --assets-path=path \
  --flavor=flavor \
  --platforms=platforms
  -h, --help

// Terminal

yarn react-native generate-bootsplash ./assets/dog.png \
  --background-color=36dbff \
  --logo-width=100 \
  --assets-path=assets \
  --flavor=main \
  --platforms=android,ios
```

You can also modify the `ios/YourProjectName/AppDelegate.mm` file, or for my case `ios/splashA/AppDelegate.mm` as stated [here](https://github.com/zoontek/react-native-bootsplash#ios-1). The file content should look similar to this:

```xml
// ios/splashA/AppDelegate.mm

#import "AppDelegate.h"
#import "RNBootSplash.h"
#import <React/RCTBundleURLProvider.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"splashA";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
/// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
///
/// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
/// @note: This must be rendered on Fabric (i.e., on the New Architecture).
/// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`.
- (BOOL)concurrentRootEnabled
{
  return true;
}
- (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
```

Next, open the `android/app/build.gradle` file and add `implementation("androidx.core:core-splashscreen:1.0.0")` to the dependencies as indicated [here](https://github.com/zoontek/react-native-bootsplash#android-1):

```kotlin
// android/app/build.gradle

apply plugin: "com.android.application"
apply plugin: "com.facebook.react"
import com.android.build.OutputFile

react {

def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false
def jscFlavor = 'org.webkit:android-jsc:+'
def reactNativeArchitectures() {
    def value = project.getProperties().get("reactNativeArchitectures")
    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
}
android {
    ndkVersion rootProject.ext.ndkVersion
    compileSdkVersion rootProject.ext.compileSdkVersion
    namespace "com.splasha"
    defaultConfig {
        applicationId "com.splasha"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include (*reactNativeArchitectures())
        }
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  
                output.versionCodeOverride =
                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
            }
        }
    }
}
dependencies {
    implementation("com.facebook.react:react-android")
    implementation("androidx.core:core-splashscreen:1.0.0")
    implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }
    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
```

Now, `cd` into the `android` folder and run the following command in your terminal:

```kotlin
./gradlew clean && ./gradlew build
```

Next, open the `android/app/src/main/res/values/styles.xml` file and add the following code:

```xml
// 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.SplashScreen -->
  <style name="BootTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
  </style>
</resources>
```

You can update the `android/app/src/main/AndroidManifest.xml` file by simply searching for `@style/AppTheme` and replacing it with `@style/BootTheme`:

```xml
// android/app/src/main/AndroidManifest.xml

// Other code
  <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/BootTheme">
// Other code
```

Finally, update the `android/app/src/main/java/com/yourprojectname/MainActivity.java` file, or in my case, the `android/app/src/main/java/com/splashA/MainActivity.java` file to look like this:

```javascript
// android/app/src/main/java/com/splashA/MainActivity.java

package com.splasha;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactActivityDelegate;

import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {
  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "splashA";
  }

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new DefaultReactActivityDelegate(
        this,
        getMainComponentName(),

        DefaultNewArchitectureEntryPoint.getFabricEnabled(), 
        DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() 
        );
  }
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this); 
    super.onCreate(savedInstanceState);
  }
}
```

### How to use React Native Bootsplash

At this point, when you start up the application, you’ll notice that the splash screen does not appear to go away. This is because the React Native Bootsplash library expects that we will only hide the splash screen when we are ready. To manually hide the splash screen, we’ll need to add the code for this functionality to our project’s entry point — for example, the `App.tsx` file. 

First, you’ll need to import the library into your file:

```typescript
// App.tsx
import RNBootSplash from "react-native-bootsplash";
```

`RNBootSplash.hide()` is the actual code that can be used to hide the splash screen. It also can accept `duration` and `fade` properties, giving you more control over how you hide the splash screen. It can be used inside a `useEffect` function, like so:

```javascript
// App.tsx

  useEffect(() => {
    const init = async () => {
      // Perform other tasks here
    };
    init().finally(async () => {
      await RNBootSplash.hide({ fade: true, duration: 500 });
    });
  }, []);
```

Suppose you’re using React Native Navigation, you can actually call the `hide` method inside the `onReady` prop in the `NavigationContainer`:

```javascript
// App.tsx
<NavigationContainer onReady={() => RNBootSplash.hide()}>
      {/* content */}
</NavigationContainer>
```

A full implementation should look similar to this example:

```javascript
// App.tsx

import React, { useEffect } from "react";
import { Text } from "react-native";
import RNBootSplash from "react-native-bootsplash";

function App() {
 useEffect(() => {
    const init = async () => {
      // Perform other tasks here
    };
    init().finally(async () => {
      await RNBootSplash.hide({ fade: true, duration: 500 });
    });
  }, []);

  return <Text>Other application content</Text>;
}
```

Or, it may look similar to this example with `NavigationContainer`:

```javascript
// App.tsx

import React, { useEffect } from "react";
import { Text } from "react-native";
import RNBootSplash from "react-native-bootsplash";
import { NavigationContainer } from '@react-navigation/native';

function App() {
  return <NavigationContainer onReady={() => RNBootSplash.hide()}>
      {/* Other app content */}
    </NavigationContainer>;
}
```

Here’s our splash screen built with React Native Bootsplash: 

![Gallery 1](https://blog.logrocket.com/wp-content/uploads/2023/07/android-splash-screen-react-native-bootsplash.gif?w=150&h=150&crop=1)

![Gallery 2](https://blog.logrocket.com/wp-content/uploads/2023/07/ios-mobile-device-splash-screen-react-native-bootsplash.gif?w=150&h=150&crop=1)

## React Native Splash Screen

[React Native Splash Screen](https://www.npmjs.com/package/react-native-splash-screen) is a very popular library for adding an efficient splash screen to a React Native project. It doesn’t come with a CLI. Instead, you’ll need to generate any required images and logos.

### Pros of using React Native Splash Screen

*   Lightweight with a package size of 40kb
*   Very popular, with over 130,000 downloads
*   Backed by numerous contributors

### Cons of using React Native Splash Screen

*   Not actively developed
*   Difficult to set up
*   Does not come with a CLI

### Preparing the React Native Splash Screen

To prepare a splash screen with the React Native Splash Screen library, you’ll need a 4096px x 4096px image like [this](https://raw.githubusercontent.com/bonarhyme/React-native-splash-screen/main/assets/strawberry.jpg). Next, you can visit the [Ape Tools website](https://apetools.webprofusion.com/#/tools/imagegorilla) to generate splash screens of different sizes to use as shown in the following steps: ![React Native Splash Screen Library Dashboard](http://blog.logrocket.com/wp-content/uploads/2023/07/react-native-plash-screen-library-dashboard.png) Once you’ve generated the splash screen, click the **Download Zip** button to download it to your machine. The unzipped files should contain a folder structure that looks like this: ![React Native Splash Screen File Structure](http://blog.logrocket.com/wp-content/uploads/2023/07/react-native-splash-screen-file-structure.png)

### How to set up React Native Splash Screen

To set up your project, generate a new React Native project as directed [here](https://reactnative.dev/docs/environment-setup). You can also simply clone this [GitHib repo](https://github.com/bonarhyme/React-native-splash-screen) or run the following command:

```bash
// Terminal
npx react-native init splashDd
```

_**N.B.,** you can use whatever folder name you like; however, I will use `splashDd`_ 

Now, install the React Native Splash Screen library, like so:

```bash
// Terminal
npm i react-native-splash-screen
```

To set up the splash screen properly, follow the [instructions from the official docs](https://github.com/crazycodeboy/react-native-splash-screen#readme). Here’s a summary for Android and iOS.

#### Setting up the splash screen for Android

Start by opening the `android/settings.gradle` file and adding the following code:

```kotlin
// android/settings.gradle
include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
```

Next, add the following code to the dependency:

```kotlin
// android/app/build.gradle

implementation project(':react-native-splash-screen')
```

Now, open the `android/app/src/main/java/com/your-app-name/MainActivity.java` file or, in my case, `android/app/src/main/java/com/splashdd/MainActivity.java` and add this snippet:

```javascript
/// android/app/src/main/java/com/splashdd/MainActivity.java

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;

// Inside the MainActivity class we will add the following code:
//public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }

    // Other code
```

Next, create a new folder, `layout`, inside the `android/app/src/main/res` folder and then create a new file, `launch_screen.xml`. Paste the following code into the new file:

```xml
/// android/app/src/main/res/layout/launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>
```

Now, open your `android/app/src/main/res/values/styles.xml` file and modify the default item to use your newly created layout:

```xml
// android/app/src/main/res/values/styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@layout/launch_screen</item>
    </style>
</resources>
```

Next, copy all the folders inside the `android` folder that was created with the splash screen image file generator: ![Folders Splash Screen Image File Generator](http://blog.logrocket.com/wp-content/uploads/2023/07/folders-splash-screen-image-file-generator.png) After copying the folders, paste them in the `android/app/src/main/res` folder. Opening each folder will reveal a `screen.png` file. This file is your splash screen, but you can’t use it until you open the `android/app/src/main/res/layout/launch_screen.xml` file and replace it with the following code:

```xml
// android/app/src/main/res/layout/launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/screen" android:scaleType="centerCrop" />
</RelativeLayout>
```

_**N.B.,** we only changed `android:src="@drawable/launch_screen"` to `android:src="@drawable/screen"`_ At this point, your splash screen has been configured correctly for Android, but you’ll still need to hide it when your app has finished launching. You can do this in the `App.tsx` file:

```typescript
// App.tsx
// Other codes
import SplashScreen from 'react-native-splash-screen';

// Other codes -- Inside our component

  useEffect(() => {
    if (Platform.OS === "android") {
      SplashScreen.hide();
    }
  }, []);
```

Once, everything has been configured properly, your splash screen and app should function like this: ![React Native Splash Screen Android](http://blog.logrocket.com/wp-content/uploads/2023/07/react-native-splash-screen-android.gif)

#### Setting up the splash screen for iOS

To set up the splash screen for iOS, start by opening your workspace in Xcode by running the following command:

```bash
// Terminal
cd ios && open splashDd.xcworkspace
```

You’ll see the following screen: ![Xcode Dashboard Preparing Splash Screen](http://blog.logrocket.com/wp-content/uploads/2023/07/xcode-dashboard-preparing-spash-screen.png) Select **Images** (#1, above), click **+** (#2, above), and then click **Image Set** (#3, above) to generate a new file, as shown below: ![Xcode Launching Image](http://blog.logrocket.com/wp-content/uploads/2023/07/xcode-launching-image.png) Next, under Application (#2, above), rename the project “Image” to “LaunchImage”. 

In the left nav menu, open the `ios/LaunchImage.launchimage` folder that was generated by the splash screen library and drag the labeled image to the appropriate boxes into the canvas in the middle of the screen: ![Xcode Dragging Images onto Canvas](http://blog.logrocket.com/wp-content/uploads/2023/07/xcode-dragging-images-onto-canvas.png) 

The canvas should now look like this: ![Xcode Canvas with Images](http://blog.logrocket.com/wp-content/uploads/2023/07/xcode-canvas-with-images.png) Now, click **LaunchScreen** in the left nav menu and delete the files indicated by red arrows in the image below: ![Xcode Deleting Image Files](http://blog.logrocket.com/wp-content/uploads/2023/07/xcode-deleting-image-files.png) Once the files are deleted, you’ll be left with a blank canvas. Click **View** in the top menu and then **Show Library**.

Next, scroll down to **Image View** and drag the window to the middle of the canvas (#2, below), like so: ![Xcode Image View](http://blog.logrocket.com/wp-content/uploads/2023/07/xcode-image-view.png) Now, use the Image dropdown to select **LaunchImage**: ![Xcode Launch Image](http://blog.logrocket.com/wp-content/uploads/2023/07/xcode-launch-image.png) Under Position View, use the **Fill Container Horizontally** and **Fill Container Vertically** options, as well as the autosizing and other available options to ensure that the splash screen image fits correctly: ![Xcode Sizing Image](http://blog.logrocket.com/wp-content/uploads/2023/07/xcode-sizing-image.png) Now, follow [these instructions](https://reactnative.dev/docs/environment-setup#running-your-react-native-application) to uninstall and start your iOS application with your new splash screen: ![iOS Mobile Device React Native Splash Screen](http://blog.logrocket.com/wp-content/uploads/2023/07/ios-mobile-device-react-native-splash-screen.gif)

## Obit Animated Splash Screen

The [Obit Animated Splash Screen library](https://www.npmjs.com/package/obit-animated-splash-screen) is helpful for adding a splash screen to your application without any extra configuration. It allows you to set the width of the splash screen logo or image and also the background color of the splash as props. It works for both Expo and bare-managed React Native projects.

### Pros of using Obit Animated Splash Screen

*   Easy to use
*   Provides the user with a minimal set of options or props
*   Allows the user to easily set the logo width and height

### Cons of using Obit Animated Splash Screen

*   It is heavy
*   Backed by a very small number of contributors and developers
*   Less popular and not regularly updated
*   Sometimes lags, delaying the display of the components
*   Shows the default splash screen before displaying the splash screen set by the user

### How to use Obit Animated Splash Screen

To use this library, simply install the [obit-animated-splash-screen package](http://obit-animated-splash-screen) into an existing or new React Native project. Let’s add this [dog image by catalyststuff](https://www.freepik.com/free-vector/astronaut-catching-star-cartoon-vector-icon-illustration-science-technology-icon-concept-isolated-premium-vector-flat-cartoon-style_16844015.htm#from_view=detail_alsolike#position=3) from Freepik into an assets folder we will create in the root folder after converting it to a PNG file. 

Next, import the library, declare a state for hiding the library, and then straight up wrap your whole application with the library, like so:

```typescript
// App.tsx

import React, { useEffect, useState } from 'react';
import {
  Text,
  View,
} from 'react-native';
import AnimatedSplash from "react-native-animated-splash-screen";

function App(): JSX.Element {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    setIsLoaded(true);
  }, []);
  return (
    <AnimatedSplash
      translucent={true}
      isLoaded={isLoaded}
      logoImage={require("./assets/dog.png")}
      backgroundColor={"#82b1ff"}
      logoHeight={200}
      logoWidth={200}
    >
      <View>
        <Text>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur dignissimos inventore tempore excepturi nobis aut obcaecati veritatis recusandae numquam commodi doloribus, pariatur sint placeat, ipsa dolorum, repudiandae necessitatibus neque fugit.
        </Text>
      </View>
    </AnimatedSplash>
  );
}

export default App;
```

In the above code, we use `logoHeight` and `logoWidth` to size the splash screen image.

### Setting up the splash screen for Android and iOS

Once, you run your code, it should look similar to this on Android and iOS:

![Gallery image](https://blog.logrocket.com/wp-content/uploads/2023/07/obit-animated-spash-screen-android.gif?w=150&h=150&crop=1)

![Gallery image 2](https://blog.logrocket.com/wp-content/uploads/2023/07/obit-animated-splash-screen-ios-e1688998091823.gif?w=150&h=150&crop=1)

## Expo Splash Screen

Expo Splash Screen is a very powerful library that can be used to display a splash screen during initial app loading. It can also be used to display a splash screen when a component or page is still performing some asynchronous action.

### Pros of using Expo Splash Screen

*   Can be used in a bare React Native project
*   Can be used in an Expo-managed project
*   Supports a splash screen on page or component load
*   Does not require much configuration when used in an Expo-managed project
*   Has the backing of the Expo team and a large following of open source developers
*   Automatically hides a splash screen after the app has loaded
*   Supports the resizing of images used for splash screens
*   Provides a CLI for automatically generating configuration when working in a bare React Native project

### Cons of using Expo Splash Screen

*   Manually setting the splash screen is time-consuming in bare React Native projects
*   The supporting CLI tool and configuration in bare React Native is deprecated

### How to use Expo Splash Screen

As a first step, install your new Expo application in a new folder, such as `splashB`, as stated in [this guide](https://docs.expo.dev/tutorial/create-your-first-app/). Then you can simply copy the [dog image by catalyststuff on Freepik](https://www.freepik.com/free-vector/cute-astronaut-riding-rocket-waving-hand-cartoon-icon-illustration-science-technology-icon-concept_10764053.htm#from_view=detail_author) into your `assets` folder and rename it as `splash.png`. The image must be a PNG or SVG format. There is no need to do any additional setup for the image as this library will resize it for you. 

Next, open the `app.json` file and set `#96c5fd` as the `splash.backgroundColor`. If you’d like the image to cover the entire screen, you can use the resize mode. 

The Expo Splash Screen library provides an option to control when to hide the splash screen. For example, you may not want it to be automatically hidden when the application loads when fetching initial content from an API. The [official documentation](https://docs.expo.dev/versions/latest/sdk/splash-screen/) provides the necessary information for the setup. 

To install the package, use the following command:

```bash
// Terminal

npx expo install expo-splash-screen
```

### Setting up the splash screen for Expo Android and Expo iOS

Once the installation is complete, open the `App.js` file and add the following code:

```javascript
// App.js

// -- other imports
import * as SplashScreen from 'expo-splash-screen';

// keep splash screen visible until we are ready
SplashScreen.preventAutoHideAsync();

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        // Perform any initial action here
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell the application to render
        setAppIsReady(true);
      }
    }
    prepare();
  }, []);

  // Function that hides our splash screen. 
  // We will call it when we are sure our application is loading on the root view
  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  // Show a white screen if the app is not ready or the splash screen is not showing.
  if (!appIsReady) {
    return null;
  }

  return (
    <View style={styles.container} onLayout={onLayoutRootView}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style='auto' />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```

Here’s your splash screen on Expo Android and Expo iOS: 

![Expo Android](https://blog.logrocket.com/wp-content/uploads/2023/07/expo-splash-screen-android-1.png?w=150&h=150&crop=1)

![Expo iOS](https://blog.logrocket.com/wp-content/uploads/2023/07/expo-splash-screen-ios-1.png?w=150&h=150&crop=1)

_**N.B.,** refer to [this guide](https://github.com/expo/examples/blob/master/with-splash-screen/App.js) for information on animating the view_

## Guidelines for mobile app icons <a name="guidelines-mobile-app-icons">

App icons are helpful for quickly identifying applications on mobile devices and in app stores. They are part of user experience, so they should follow good design principles. 

Here are the general guidelines you should follow to achieve uniformity and consistency for app icons on different devices and operating systems:

*   **Design style**: simple
*   **Design content**: should only contain graphical images, as opposed to photos or screenshots, to ensure better visibility, especially on smaller devices
*   **Shape**: square; should not be forced to occupy the full space of the asset (a good example is [here](https://developer.android.com/distribute/google-play/resources/icon-design-specifications#sizing.)) unless the icon is actually an illustration
*   **Edges**: must not have any shadows or rounded edges since play store and app store will mostly handle that automatically; good examples can be found [here](https://developer.android.com/distribute/google-play/resources/icon-design-specifications#shadows) and [here](https://developer.android.com/distribute/google-play/resources/icon-design-specifications#corner_radius)
*   **Color**: background color should match the brand color; there should be no transparency
*   **Image vs. text**: must not have texts or elements indicating ranking or participation in play store or app store programs, promoting sales, or misleading users
*   **Final size**: 512px x 512px for Android and 1024px x 1024px for iOS. The app store or play store can scale down your app icons automatically, however, you can still provide the different sizes yourself. On iOS the sizes are as follows: 58px x 58px, 76px x 76px, 80px x 80px, 87px x 87px, 114px x 114px, 120px x 120px, 152px x 152px, 167px x 167px, 180px x 180px, and 1024px x 1024px. Android sizes are: 36px x 36px, 48px x 48px, 72px x 72px, 96px x 96px, 144px x 144px, 192px x 192px, and 512px x 512px
*   **File format**: 32-bit PNG

## How to set up an app icon <a name="how-to-set-up-app-icon">

As a first step in setting up an app icon, you’ll need to generate it; then you can customize it. Here are some app icon generators to consider:

*   [Easy App Icon](https://easyappicon.com/)
*   [AppIcon.co](https://appicon.co)
*   [Icon Kitchen](https://icon.kitchen/)
*   [Resize App Icon](https://resizeappicon.com/)

For this example, let’s use Icon Kitchen. Start by selecting a logo from the menu, then you can customize it, and then download the custom app icon to your machine.

### Setting an app icon for Android

To set up an app icon for Android, start by navigating to `ourApp/android/app/src/main/res`. Next, replace the following folders with the ones provided by the app icon generator: `mipmap-hdpi`, `mipmap-mdpi`, `mipmap-xhdpi`, `mipmap-xxhdpi`, and `mipmap-xxxhdpi`. 

Now, open `app/splashDd/android/app/src/main/AndroidManifest.xml` and remove `android:icon="@mipmap/ic_launcher_round"` since it does not currently exist in your application. Then, uninstall the application from your simulator and restart the server to see the app icon.

## Setting an app icon for iOS

To set up an app icon for iOS, open then the project in Xcode or by running the following command, replacing `splashDd` with your folder name:

```bash
// Terminal
cd ios && open splashDd.xcworkspace
```

Now, open Xcode, open the `ios` folders in the folder provided by the app icon generator and follow the steps in the below Xcode screenshot: ![Xcode Icon Generator](http://blog.logrocket.com/wp-content/uploads/2023/07/xcode-icon-generator.png) After you’ve dragged the equivalent icons to the correct boxes, you can then uninstall the app in your iOS simulator and then restart the server.

## How to set a mobile app name (bonus)

As mentioned earlier in this article, there are times when you may wish to set a custom name for your application. You can do this by opening and editing the `android/app/src/main/res/values/strings.xml` file on Android, like so:

```xml
// android/app/src/main/res/values/strings.xml

<resources>
    <string name="app_name">Bonarhyme</string>
</resources>
```

On iOS, you can open the `ios/splashDd/Info.plist` file, locate `CFBundleDisplayName`, and then edit the string, like so:

```xml
// ios/splashDd/Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>Bonarhyme</string> // Edit here

    // Other codes
```

Below are the custom app icon and app name added to your application:

![Custom app](https://blog.logrocket.com/wp-content/uploads/2023/07/custom-app-icon-android.png?w=150&h=150&crop=1)

![Custom app 2](https://blog.logrocket.com/wp-content/uploads/2023/07/custom-app-icon-ios.png?w=150&h=150&crop=1)

## Conclusion

In the article, we investigated four React Native splash screen libraries and some associated tools that can be used to set or generate a new splash screen for Android or iOS apps. We also reviewed app icon guidelines for mobile devices, looked at how to generate and set app icons, and how to provide a custom name for a mobile application. 

I hope you found this article useful for better understanding how to add branding to your React Native application in a very elegant manner. Thanks for reading! Be sure to leave a comment if you have any questions. Happy coding!

---

## [LogRocket](https://lp.logrocket.com/blg/react-native-signup): Instantly recreate issues in your React Native apps.

[![LogRocket Signup](https://blog.logrocket.com/wp-content/uploads/2021/10/react-native-plug_v2-2.png)](https://lp.logrocket.com/blg/react-native-signup)

[LogRocket](https://lp.logrocket.com/blg/react-native-signup) is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.

LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.

Start proactively monitoring your React Native apps — [try LogRocket for free](https://lp.logrocket.com/blg/react-native-signup).