HomeGuidesReferenceLearn
ArchiveExpo SnackDiscord and ForumsNewsletter

Configure status bar, splash screen and app icon

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


Before considering the app fully launchable, we have to configure the status bar, add a splash screen, and add an app icon. In this chapter, we will learn how to do all of that.

1

Configure the status bar

The expo-status-bar library comes pre-installed in every project created using create-expo-app. This library provides a <StatusBar> component that allows configuring the app's status bar to change the text color, background color, make it translucent, and so on.

The <StatusBar> component is already imported in the App.js:

App.js
import { StatusBar } from 'expo-status-bar';

It's also mounted in the <App> component.

App.js
<StatusBar style="auto" />

Currently, the style value is auto. It means that the status bar will automatically pick the text color based on the app's color scheme. However, we do not have different color schemes in the tutorial app. There is only one active color scheme, which has a dark background. To make the status bar light, change the style value to light.

App.js
<StatusBar style="light" />

2

Splash screen

A splash screen is a screen that is visible before the contents of the app has had a chance to load. It hides once the app is ready for use and the content is ready to be displayed.

The splash screen is configured by defining a path to the "splash.image" property in the app.json file. It has a current value of "./assets/splash.png" path. This is already done by default when a new Expo project is created.

We already have splash.png in the assets 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 make the splash screen stick around for longer by manually controlling when it is hidden, rather than the default of automatically hiding it as soon as the app is ready.

Start by running the following command:

Terminal
npx expo install expo-splash-screen

Next, add the following code in App.js to delay hiding the splash screen for five seconds.

App.js
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!

Notice that there is a white bar on the edges of the Android device in the above demo. Depending on the resolution of the device, it might not be visible. To resolve this, we need to set the backgroundColor for the splash screen. The background color is applied to any screen area that isn't covered by the splash image.

3

Configure the splash screen background color

We can configure the splash screen's background color in app.json file. Open it and make the following change in "splash":

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

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

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

4

App icon

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

Similar to splash screen image, the icon is configured by defining a path to the "icon" property in the app.json file. It has a current value of "./assets/icon.png", so we don't have to change anything.

Eventually, when you build the 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:

We have completed the app!

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

Learn more

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.