pages/tutorial/configuration.mdx

---
title: Configure status bar, splash screen and app icon
---

import ImageSpotlight from '~/components/plugins/ImageSpotlight';
import Video from '~/components/plugins/Video';
import { Collapsible } from '~/ui/components/Collapsible';
import { A } from '~/ui/components/Text';
import { Terminal } from '~/ui/components/Snippet';
import { Step } from '~/ui/components/Step';
import { BoxLink } from '~/ui/components/BoxLink';
import { BookOpen02Icon } from '@expo/styleguide-icons';

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.

<Step label="1">

## Configure the status bar

The <A href="/versions/latest/sdk/status-bar/" openInNewTab>`expo-status-bar`</A> 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**:

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

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

```jsx 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`.

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

<ImageSpotlight
  alt="Break down of initial layout."
  src="/static/images/tutorial/statusbar-example.jpg"
  style={{ maxWidth: 480 }}
/>

</Step>

<Step label="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 <A href="/workflow/configuration/" openInNewTab>**app.json** file</A>.
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:

<ImageSpotlight
  src="/static/images/tutorial/splash.png"
  style={{ maxWidth: 250 }}
  containerStyle={{ marginBottom: 20 }}
/>

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

<Video file={'tutorial/splash-add.mp4'} />

<Collapsible summary="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 cmd={['$ npx expo install expo-splash-screen']} />

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

```jsx 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!

</Collapsible>

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.

</Step>

<Step label="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"`:

{/* prettier-ignore */}
```json app.json
{
  "splash": {
    "image": "./assets/splash.png",
    "resizeMode": "contain",
    /* @info Use #25292e (black) instead of the default #ffffff (white). */
    "backgroundColor": "#25292e" /* @end */
  }
}
```

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:

<Video file={'tutorial/splash-fixed.mp4'} />

</Step>

<Step label="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:

<ImageSpotlight src="/static/images/tutorial/icon.png" style={{ maxWidth: 150 }} />

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:

<ImageSpotlight
  alt="Splash screen on Developer Menu in Expo Go app."
  src="/static/images/tutorial/app-icon-visible.jpg"
  style={{ maxWidth: 250 }}
  containerStyle={{ marginBottom: 0 }}
/>

</Step>

## We have completed the app!

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

<BoxLink
  title="Learn more"
  Icon={BookOpen02Icon}
  description="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."
  href="/tutorial/follow-up"
/>