Configure status bar, splash screen and app icon

Edit this page

In this tutorial, learn the basics of how to configure a status bar, splash screen and app icon.


In this chapter, we'll address some app details before deploying our app to an app store, such as theming the status bar, add a splash screen, and customizing the app icon.

Watch: Adding the finishing touches to your universal Expo app
Watch: Adding the finishing touches to your universal Expo app

1

Configure the status bar

expo-status-bar library comes pre-installed in every project created using create-expo-app. This library provides a setStatusBarStyle() method to configure the app's status bar text color.

Inside app/_layout.tsx:

  1. Import setStatusBarStyle from expo-status-bar and useEffect from React.
  2. Add the useEffect hook to set the status bar style to light when the app loads.
app/_layout.tsx
import { Stack } from "expo-router";
import { setStatusBarStyle } from "expo-status-bar";
import { useEffect } from "react";

export default function RootLayout() {
  useEffect(() => {
    setTimeout(() => {
      setStatusBarStyle("light");
    }, 0);
  }, []);

  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

Let's take a look at our app now on Android, and iOS:

2

Splash screen

A splash screen is visible before the app's content is loaded. It hides once the app's content is ready to be displayed.

Setting the "splash.image" property with a valid file path in the app.json file configures a splash screen. By default, a new Expo project already sets this property to a placeholder splash image. We already have splash.png in the assets/images directory. It looks as shown below:

Let's take a look at our app now on Android and iOS:

Is the app loading too quickly for you to get a good look at the splash screen?

You can display the splash screen for longer intervals. Run the following command to install expo-splash-screen, a library that provides a preventAutoHideAsync() method to delay hiding the splash screen:

Terminal
npx expo install expo-splash-screen

Add the following code in app/_layout.tsx to delay hiding the splash screen for five seconds.

app/_layout.tsx
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();
setTimeout(SplashScreen.hideAsync, 5000);

Don't forget to remove this code when you are done testing your splash screen.

Depending on the device's resolution, a white bar may be visible on the edges of an Android device's screen. To resolve this, set the backgroundColor for the splash screen in app.json to match the background in the splash image:

app.json
{
  "splash": {
    "image": "./assets/images/splash.png",
    "resizeMode": "contain",
    "backgroundColor": "#25292e"
  }
}

The backgroundColor value in the above snippet matches the background of the splash screen image.

3

App icon

Inside the project, there's an icon.png file inside the assets/images directory. This is our app icon. It's a 1024px by 1024px image and looks as shown below:

Like the splash screen image, the "icon" property in the app.json file configures the app icon's path. By default, a new Expo project defines the correct path to "./assets/images/icon.png". We don't have to change anything.

Eventually, when you'll build your app for the app stores, Expo Application Services (EAS) will take this image and create optimized icon for every device.

You can see the icon in various places in Expo Go. Here is an example of the app icon displayed in the developer menu of Expo Go:

Summary

Chapter 9: Configure status bar, splash screen and app icon

Well done! We built an app that runs on Android, iOS, and the web from the same codebase.

The next section of the tutorial will guide you toward resources to learn more about concepts we've covered here and others we have mentioned briefly.

Next: Learning resources