This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 58).

expo-status-bar gives you a component and imperative interface to control the app status bar to change its text color, hide it, and apply animations to any of these changes. Exactly what you are able to do with the StatusBar component depends on the platform you're using.

tvOS and web support

For tvOS, the expo-status-bar code will compile and run, but no status bar will show.

For web, there is no API available to control the operating system's status bar, so expo-status-bar will do nothing and won't throw an error.

Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

Configuration in app config

You can configure expo-status-bar using its built-in config plugin if you use config plugins in your project (Continuous Native Generation (CNG)). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. If your app does not use CNG, then you'll need to manually configure the library.

Example app.json with config plugin

{
  "expo": {
    "plugins": [
      [
        "expo-status-bar",
        {
          "hidden": false,
          "style": "dark"
        }
      ]
    ]
  }
}

Configurable properties

Usage

import { StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Notice that the status bar has light text!</Text>
      <StatusBar style="light" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#fff',
  },
});

Vertical bar on iPhone Duo

The vertical bar APIs need iOS 27.1 or later and a build made with Xcode 27.1 or later. On older builds and systems, useVerticalBarEdgeIOS returns null and verticalBarBehaviorIOS has no effect.

iPhone Duo defaults to placing the status bar in a vertical bar beside your content instead of along the top. Use useVerticalBarEdgeIOS to find which edge the vertical bar is on, for example to keep custom controls clear of it. It returns 'leading', 'trailing', or null. On devices and in orientations without a vertical bar (including iPhone Duo), it returns null. The value updates when the device rotates or unfolds.

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

export default function Screen() {
  const verticalBarEdge = useVerticalBarEdgeIOS();
  // 'leading' | 'trailing' | null
}

To keep the status bar and other system bars horizontal, set verticalBarBehaviorIOS="disabled" on a mounted StatusBar. Reserve this for screens that work better with horizontal bars, such as a full-screen video player. The edge that useVerticalBarEdgeIOS reports stays the same while the vertical bar is disabled.

<StatusBar verticalBarBehaviorIOS="disabled" />

When several mounted StatusBar components set this prop, the most recently mounted one applies.

API

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

Component

Component methods

StatusBar.getVerticalBarEdgeIOS(); // 'trailing' on iPhone Duo

StatusBar.setHidden(true, 'slide');

StatusBar.setStyle('dark', true);

StatusBar.setVerticalBarBehaviorIOS('disabled');

Hooks

Methods

Types