Building a splash screen in React Native

Building a splash screen in React Native

In this tutorial, we’ll demonstrate how to build and show a splash screen in React Native. We’ll walk you through how to build stunning welcome displays for both iOS and Android apps using react-native-splash-screen.

Here’s what we’ll cover:

• What is a splash screen?

• React Native splash screen example

• Why image size matters

• How to build a splash screen in React Native

  • iOS

  • Android

What is a splash screen?

The splash screen is the first screen that appears before the user accesses the rest of your app’s functionalities. A splash screen is arguably the best way to make your mobile application’s brand name and icon stick in the user’s subconscious.

In web applications, we use preloaders to inform animations to keep users entertained while server operations are being processed. As straightforward as this sounds, it’s a critical tool to build and retain your user base.

There are many benefits to creating a splash screen in React Native. Imagine, for example, that you’re preloading data from an API. You’ll want to show a loader while the user is waiting; showing a loader as soon as the app starts helps you present an organized, well-designed display to your user while they wait for the app to initialize.

React Native splash screen example

For this react-native-splash-screen demo, we’ll build a splash screen for both Android and iOS. The tutorial will walk you through how to prepare the right image sizes, update the necessary files, and hide the splash screen on app load. The finished app will look like the screenshot below:

To follow along with this React Native splash screen tutorial you should have:

• Familiarity with CSS, HTML, Javascript (ES6)

• Node.js and Watchman installed on your development machine

• iOS Simulator or Android Emulator for testing

• A code editor installed in your development machine (e.g., VS Code)

• A basic understanding of React/React Native

Let’s get started!

Why image size matters

Creating a splash screen for a mobile application is a bit tricky and you don’t want to risk having display issues on some devices due to inconsistencies in your splash screen resolutions. For instance, the android device’s requirements are totally different from that of iOS. Most experienced designers can create the required splash screen resolutions for both devices from scratch.

However, there are lots of available third-party tools that can help you create a splash screen for both Android and iOS. In this tutorial, we will be using the App Icon Generator, an online platform for creating icons and images for Android and iOS apps.

Before you proceed, make sure you have a high-definition, 2,000-by-3,000px (72 PPI) image ready. You can clone the starter file for these tutorials on GitHub.

How to build a splash screen in React Native

First, head over to Appicon. Drag your image on the box provided, select 4x as your base size, select iOS and Android, and click generate. This process should take approximately two minutes to complete, depending on your internet speed.

Next, extract the downloaded file and copy the iOS and Android folder to the image folder located in the assets directory of the starter project you cloned.

Building a splash screen in React Native requires some fine-tuning. To begin, if you’re using a Mac, run npm i react-native-splash-screen --save on your terminal (run command prompt if you’re using Windows). cd into the iOS directory and run pod install. Then, cd back to the root directory of the project.