Configure status bar, splash screen and app icon

Configure the status bar

expo-status-bar library comes pre-installed in every project created using create-expo-app. This library provides a StatusBar component to configure the app's status bar style.

Inside src/app/_layout.tsx:

1. Import StatusBar from expo-status-bar.
2. Add the StatusBar component after the Stack component, inside GestureHandlerRootView. Set its style prop to light, so the status bar text and icons are light on the dark background.

import { Stack } from 'expo-router';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';

export default function RootLayout() {
  return (
    <GestureHandlerRootView>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
      <StatusBar style="light" />
    </GestureHandlerRootView>
  );
}

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

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".

A new Expo project also has platform-specific icon properties, which take priority over "icon":

• On Android, the "android.adaptiveIcon" property uses the android-icon-foreground.png, android-icon-background.png, and android-icon-monochrome.png files from the assets/images directory. The downloaded assets replaced these files with the StickerSmash icon, so we don't have to change anything.
• On iOS, the "ios.icon" property uses the default Expo icon from the assets/expo.icon file. To use our icon.png on iOS, remove the following "ios" property from app.json:

{
  "expo": {
    "icon": "./assets/images/icon.png",
    %%placeholder-start%%... %%placeholder-end%%
    "ios": {
      "icon": "./assets/expo.icon"
    }
    %%placeholder-start%%... %%placeholder-end%%
  }
}

Expo Go doesn't show our app icon. We'll see it on the device after we build the app. To learn more, see the app icon guide.

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

Splash screen

A splash screen is visible before the app's content is loaded. It uses a smaller image, such as an app's icon, which is centered. It hides once the app's content is ready to be displayed.

The expo-splash-screen plugin already comes pre-installed in every project created using create-expo-app. This library provides a config plugin to configure the splash screen.

In app.json, the expo-splash-screen plugin is already configured to use the app's icon as the splash screen image (provided in the downloadable assets). Its backgroundColor is the default Expo blue (#208AEF). Change it to #25292e, so the splash screen has the same dark background as our app and its icon:

{
  "plugins": [
    %%placeholder-start%%... %%placeholder-end%%
    [
      "expo-splash-screen",
      {
        "backgroundColor": "#25292e",
        "image": "./assets/images/splash-icon.png",
        "imageWidth": 76
      }
    ]
  ]
}

However, to test the splash screen, we cannot use Expo Go or a development build. To test it, we need to create a preview or a production build of our app. We recommend going through the following resources to learn more about the splash screen configuration and how to test it:

• Create a splash screen icon guide to learn how splash screen icon is configured.
• To learn how to create a preview build, see Internal distribution guide in EAS Tutorial, or to create production builds see guides for Android and iOS.