How to Make a React Native Splash Screen

Splash screens are a great way to brand your company or product. They’re also immensely useful to load background content for your application while providing a smooth loading experience for your users.

However, a lot of developers often miss out on adding a splash screen to their apps. That’s because they feel it’s too cumbersome and not worth the time and effort. However, once they realize the benefits of a splash screen and how easy it is to add one to their app, they never go back!

So in this tutorial, I’ll help you understand in detail what a splash screen is and why you should use it. We’ll then learn how to build one for our own app in React Native.

What Is a Splash Screen?

A splash screen is the first screen you see whenever you open an app. People also call it the launch screen. As a demonstration, I have the Netflix app here on my phone.

Notice that black screen with the big Netflix logo in the middle when the app launches? That’s the splash screen!

Splash screens serve a number of purposes. Let’s see why they’re so important.

A Splash Screen Speaks for Your Brand

Your app is a product that may have a bigger goal or a company behind it. I’m sure your users want to know the company that’s powering your app. So there it is—branding!

Splash screens are a great way to brand your company or product. Every time the splash screen comes up when the user opens the app, they’ll see your product name or company logo. This helps them associate your brand’s or product’s image with your app.

A Splash Screen Loads Background Assets

Your app may have to load a rendering engine or some heavy graphics, styles, images, or other heavy assets. You can load them smoothly in the background and show your users a simple splash screen as a loader.

When your app has everything in place to show you the first screen of the app, it transitions the splash screen away to your app’s main screen. This creates a more delightful experience for your users while enabling you to download everything you need.

Therefore, having a splash screen is a must for your app.

Create an Expo Project

Now that you understand the need for a splash screen, let’s build one! But first, we need to create and set up a new React Native project.

For this tutorial, I’ll use Expo. Create a new Expo app by running:

expo init rn-splash-screen

Choose a blank template. Once you’re done, run the Expo server:

expo start

We’re all set! Let’s go ahead and create a splash screen image.

Create a Splash Screen Image

You’ll need a standard splash screen image that’s 1080 pixels wide and 1920 pixels tall. For this exercise, you could search the internet for a sample splash image of the specified size. However, don’t worry if you’re not able to find one. You can download the one that I’m using in this tutorial from here.

Here’s what the image looks like:

Configure a Property in app.json

Once you’ve downloaded the splash screen image, move it under the assets folder of your project. Notice that it already has an image with the name splash.png. This is the image Expo puts by default as the splash screen for your application.

Head over to your project’s app.json file. Here, inside the expo property, you’ll find a splash property that looks like this:

All you need to do now is change the image property underneath it to the path of your own splash image.

...
  "splash": {
      "image": "./assets/SplashScreen.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
...

Great! You’ve configured your new splash image to be used in your app. Let’s move ahead.

Remove Background Color

The splash object contains a property called backgroundColor. This basically adds a background color to the screen. Currently, it’s set to #ffffff so it’ll add a white border to the image.

Since our image already contains some background color, let’s remove this property. Note that you may want to add it depending on your splash image.

...
  "splash": {
      "image": "./assets/SplashScreen.png",
      "resizeMode": "contain"
    },
...

Set resizeMode for Splash Image

By default, Expo will resize your image to maintain your splash image’s aspect ratio. This resizing is to make sure that the image fits into the device’s screen, regardless of the screen size. There are two modes you can use to resize the image.

The contain Mode

If you set resizeMode as contain, a smaller image will appear at the center of the screen. If it fits the entire screen, you’re all set. However, if it doesn’t, the empty space will be regarded as the background. Therefore the previous property, backgroundColor, will be visible here.

The cover Mode

On the other hand, if you set the resizeMode as cover, the image will enlarge to fit the screen. A smaller image may look blurred, but the backgroundColor property won’t apply.

For this tutorial, I’ll set the resizeMode as cover. On my device, the cover mode works fine without any background color, and the image fits perfectly.

...
  "splash": {
      "image": "./assets/SplashScreen.png",
      "resizeMode": "cover"
    },
...

If you’re still confused about the resizing mode, Expo docs have done an awesome job explaining this concept.

‍

And that’s it! Yes, we’re all done now. Let’s check our new splash screen image by reloading the app. If you’re on an iOS device, you’ll have to restart your Expo server.

In a few simple steps, we created and set a custom splash screen image for our React Native application. How awesome is that?

Background Loading With Splash Screen

The above solution will give custom branding to your app through your own splash image. However, right now we have no control over how long the splash screen appears. But we can fix that using a custom module provided by Expo called SplashScreen.

Install and Use the SplashScreen Module

Install the SplashScreen module by running:

expo install expo-splash-screen

Note that you have to restart your Expo server before using the module.

Now, let’s import this module inside our App.js file:

import * as SplashScreen from 'expo-splash-screen';

Create Ready State

Now that we have full control of our splash screen, we’ll keep a simple state that tells us when the application is ready to be rendered.

//This state keeps track if the app has rendered 
const [ready,setReady]=useState();

Load Heavy Assets

Next, we’ll create a simple function that we can asynchronously call to load all our heavy assets.

  const loadBackgroundAssets=async()=>{
    //Write all the code to load heavy images, fonts in the background
    console.log('Loading heavy assets in the background')
  }

Show the Splash Screen While Loading Assets in the Background

Next, we’ll create a function that loads the splash screen and calls our previously created loadBackgroundAssets function.

const readyApp=async()=> {
    try {
      // Keep the splash screen visible while we fetch resources
      console.log('Trigger the Splash Screen visible till this try block resolves the promise')
      await SplashScreen.preventAutoHideAsync();
      // Load background assets here
      await loadBackgroundAssets();
      //Explicit delay to mock some loading time
      await new Promise(resolve => setTimeout(resolve, 3000));
    } catch (e) {
      console.warn(e);
    } finally {
      console.log('Render the application screen')
      //Set ready to true to render the application
      setReady(true);
    }
  }

Inside the try block, we’re doing three things:

1. Calling the splash screen using await SplashScreen.preventAutoHideAsync().
2. Invoking loadBackgroundAssets(), which loads the heavy assets in the background.
3. Setting an explicit delay to mimic the behavior of loading heavy assets using a setTimeout.

When the promise in the try block resolves, we move to the finally block. Inside this, we simply set the ready state to true. This indicates that we’ve performed all the background tasks and are ready to render the application.

But when and where should we call the above readyApp function? As soon as the app loads. That’s right! It’ll be inside our App component’s componentDidMount life cycle method or useEffect life cycle hook.

  useEffect(() => {
    readyApp()
  }, []);

Hide the Splash Screen Once the Application Is Ready

If we use the useEffect to hide the splash screen, we’d see a delay in seeing our first screen. It’s a matter of a few seconds or even a fraction of a second, but it’ll degrade the user experience of your app. Sometimes, you may even see a blank white screen flicker as the transition between the splash screen and your app’s main screen.

We want the transition to be smooth and seamless. Therefore, we’ll use a useCallback hook to do this.

const onLayoutRootView = useCallback(async () => {
    if (ready) {
      console.log('Hide the splash screen immediately')
      await SplashScreen.hideAsync();
    }
  }, [ready]);

The useCallback hook takes the ready state as a parameter, and the await SplashScreen.hideAsync() hides the splash screen immediately after ready is set to true.

Render the App

Now, all we need to do is conditionally render our main screen. Inside App.js, do the following:

if (!ready) {
    return null;
  }
  return (
    <View style={styles.container}  onLayout={onLayoutRootView} >
      <Text>Welcome! 👋</Text>
    </View>
  );

Notice that we’ve also passed the onLayoutRootView callback to the onLayout prop of our root <View/> component. This is essential. Otherwise, your app would be stuck on a splash screen!

If you now reload the app, you should get the above console logs in the following order:

And your app should flawlessly load a splash screen for three seconds and transition smoothly to your main screen. Awesome!

Write and Run an Automated Test

Finally, let’s test our splash screen app using an amazing no-code test tool called Waldo.

First, we’ll need an Android Package (APK) build of our app ready. So, run the following command to generate the build:

expo build:android

Once your build finishes, you should find it inside your Expo account’s builds.

Click the build, and you should see an option to download it.

Now, let’s head over to Waldo and log in. If it’s your first time here, you’ll need to sign up and verify your email. Once you’re all set up, Waldo will ask you to upload an APK build.

Upload the .apk file you downloaded from your Expo account. After that, Waldo will automatically boot up a physical device on your browser to record a test.

You can also do that through your Waldo account’s dashboard.

You’ll then be able to record a test on your browser. Since we want to test our splash screen, we’ll add a relaunch action to the app.

Well done! We’ll now save this recorded test.

Almost there! Now, we need to run this test:

Waldo will automatically run the above automated test to see if there are any issues.

Luckily, we did everything correctly, so our test should pass.

And it does! That’s how easy it is to use Waldo to record and run automated tests directly in your browser. All that without writing a single line of code!

Learning More

I hope this guide helped you understand what splash screens are and how you can use them effectively in your Expo application. There’s another resource that you can use alongside the SplashScreen module. It’s called the AppLoading module.

If you got stuck somewhere, feel free to visit the code for this tutorial here.

Until next time!

This post was written by Siddhant Varma. Siddhant is a full stack JavaScript developer with expertise in frontend engineering. He’s worked with scaling multiple startups in India and has experience building products in the Ed-Tech and healthcare industries. Siddhant has a passion for teaching and a knack for writing. He’s also taught programming to many graduates, helping them become better future developers.