System bars

Learn how to handle and customize system bars for safe areas and edge-to-edge layout in your Expo project.

System bars are the UI elements at the edges of the screen that provide essential device information and navigation controls. Depending on the mobile OS, they include the status bar (Android and iOS), caption bar (Android only), navigation bar (Android and iOS), and home indicator (iOS only).

These components are used to display device information such as battery level, time, notification alerts, and provide direct interaction with the device from anywhere in the device's interface. For example, an app user can pull down the status bar to access quick settings and notifications regardless of which app they're currently using.

System bars are fundamental to the mobile experience, and understanding how to work with them properly is important for creating your app.

Handling overlaps using safe areas

Some of your app's content may draw behind the system bars. To handle this, you need to position your app's content correctly by avoiding the overlap and ensuring that the controls from the system bars are present.

The following guide walks you through how to use SafeAreaView or a hook to apply insets directly for each edge of the screen.

Safe areas and edge-to-edge layout on Android

Before edge-to-edge on Android, it was common to have a translucent status bar and navigation bar. With this approach, the content drawn behind these bars was already underneath them, and it was typically not necessary to factor in safe areas.

Now, with edge-to-edge on Android, you will need to use safe areas to ensure that content does not overlap with system bars.

Customizing system bars

System bars can be customized to match your app's design and provide better visibility in different scenarios. When using Expo, there are two libraries available for this: expo-status-bar and expo-navigation-bar (Android only).

Status bar configuration

The status bar appears at the top of the screen on both Android and iOS. You can customize it using expo-status-bar. It provides a StatusBar component that you can use to control the appearance of the status bar while your app is running using the style property or the setStatusBarStyle method:

import { StatusBar } from 'expo-status-bar';

export default function RootLayout() {
  <>
    {/* Use light text instead of dark text in the status bar to provide more contrast with a dark background. */}
    <StatusBar style="light" />
  </>;
}

Note: In Expo default template, the style property is set to auto. It automatically picks the appropriate style depending on the color scheme (light or dark mode) currently used by your app.

To control the StatusBar visibility, you can set the hidden property to true or use the setStatusBarHidden method.

With edge-to-edge enabled on Android, features from expo-status-bar that depend on an opaque status bar are unavailable. It's only possible to customize the style and visibility. Other properties will no-op and warn.

Navigation bar configuration (Android only)

On Android devices, the Navigation Bar appears at the bottom of the screen. You can customize it using the expo-navigation-bar library. It provides a NavigationBar component that you can use to set the style of the navigation bar using the setStyle method:

import { NavigationBar } from 'expo-navigation-bar';
import { useEffect } from 'react';

useEffect(() => {
  if (Platform.OS === 'android') {
    // Set the navigation bar style
    NavigationBar.setStyle('dark');
  }
}, []);

To control the NavigationBar visibility, you can use the setVisibilityAsync method.

With edge-to-edge enabled on Android, features from expo-navigation-bar that depend on an opaque navigation bar are unavailable. It's only possible to customize the style and visibility. Other properties will no-op and warn.