Edit this page
In this tutorial, learn the basics of how to configure a status bar, splash screen and app icon.
Edit this page
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.
1
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:
setStatusBarStyle
from expo-status-bar
and useEffect
from React.useEffect
hook to set the status bar style to light
when the app loads.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
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:
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:
-
npx expo install expo-splash-screen
Add the following code in app/_layout.tsx to delay hiding the splash screen for five seconds.
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:
{
"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
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:
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.