Written by Onuorah Bonaventure✏️
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:
Jump ahead:
- Creating splash screens with React Native Bootsplash
- Creating splash screens with React Native Splash Screen
- Creating splash screens with Obit Animated Splash Screen
- Creating splash screens with Expo Splash Screen
- Guidelines for mobile app icons
- How to set up an app icon
- How to set a mobile app name
React Native Bootsplash
The 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 to download the one I have already generated. Or, you can just follow along.
How to set up React Native Bootsplash
To use the React Native Bootsplash library, you’ll need to open an existing React Native application or follow this guide to set up a new React Native app. Alternatively, you can clone the complete source code for this project on GitHub.
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 CLI using one of the following commands:
$ 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 from catalyststuff on Freepik.
Now, run the code in the terminal to generate the splash screens and app icons:
// 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:
// 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:
// 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. The file content should look similar to this:
// 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:
// 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:
./gradlew clean && ./gradlew build
Next, open the android/app/src/main/res/values/styles.xml
file and add the following code:
// 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
:
// 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:
// 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:
// 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:
// 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
:
// App.tsx
<NavigationContainer onReady={() => RNBootSplash.hide()}>
{/* content */}
</NavigationContainer>
A full implementation should look similar to this example:
// 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
:
// 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:
React Native Splash Screen
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. Next, you can visit the Ape Tools website to generate splash screens of different sizes to use as shown in the following steps: 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:
How to set up React Native Splash Screen
To set up your project, generate a new React Native project as directed here. You can also simply clone this GitHib repo or run the following command:
// 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:
// Terminal
npm i react-native-splash-screen
To set up the splash screen properly, follow the instructions from the official docs. 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:
// 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:
// 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:
/// 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:
/// 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:
// 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: 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:
// 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:
// 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:
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:
// Terminal
cd ios && open splashDd.xcworkspace
You’ll see the following screen: Select Images (#1, above), click + (#2, above), and then click Image Set (#3, above) to generate a new file, as shown below: 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:
The canvas should now look like this: Now, click LaunchScreen in the left nav menu and delete the files indicated by red arrows in the image below: 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: Now, use the Image dropdown to select LaunchImage: 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: Now, follow these instructions to uninstall and start your iOS application with your new splash screen:
Obit Animated Splash Screen
The Obit Animated Splash Screen library 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 into an existing or new React Native project. Let’s add this dog image by catalyststuff 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:
// 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:
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. Then you can simply copy the dog image by catalyststuff on Freepik 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 provides the necessary information for the setup.
To install the package, use the following command:
// 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:
// 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:
N.B., refer to this guide for information on animating the view
Guidelines for 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) 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 and here
- 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
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:
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:
// 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: 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:
// 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:
// 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:
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: Instantly recreate issues in your React Native apps.
LogRocket 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.
Top comments (1)
hey, nice article. for android 12 and above we are getting double splash screen, how can we fix it?