Expo

StatusBar

expo-status-bar gives you a component and imperative interface to control the app status bar to change its text color, background color, hide it, make it translucent or opaque, 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.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb
✅✅✅✅✅
Web browser support: there is no API available on the web for controlling the operating system status bar, so expo-status-bar will noop (it will do nothing, it will also not error).

Installation

expo install expo-status-bar

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Example Usage

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

export default class App extends React.Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#000',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Text style={{ color: '#fff' }}>Notice that the status bar has light text!</Text>
        <StatusBar style="light" />
      </View>
    );
  }
}

API

import { StatusBar } from 'expo-status-bar';
Components
Methods
Types

Components

StatusBar

A component that allows you to configure your status bar without directly calling imperative methods like setBarStyle.
You will likely have multiple StatusBar components mounted in the same app at the same time. For example, if you have multiple screens in your app, you may end up using one per screen. The props of each StatusBar component will be merged in the order that they were mounted. This component is built on top of the StatusBar component exported from React Native, and it provides defaults that work better for Expo users.

Props

  • style (StatusBarStyle) - The color of the status bar text.
  • animated (boolean) - If the transition between status bar property changes, such as style, should be animated.
  • hidden (boolean) - If the status bar should be hidden.
  • networkActivityIndicatorVisible (boolean) - If the network activity indicator should be visible. [iOS only]
  • hideTransitionAnimation (StatusBarAnimation) - The transition effect when showing and hiding the status bar. Defaults to 'fade'. [iOS only]
  • backgroundColor (string) - The background color of the status bar. [Android only]
  • translucent (boolean) - Whether the app can draw under the status bar. When true, content will be rendered under the status bar. This is always true on iOS and cannot be changed. On Android, the default is also true unless you have explicitly configured the androidStatusBar.translucent key in app.json to false. [Android only]

Methods

setStatusBarBackgroundColor(backgroundColor, animated)

Set the background color of the status bar. [Android only]

Arguments

  • backgroundColor (string) - The background color of the status bar.
  • animated (boolean) - true to animate the background color change, false to change immediately.

setStatusBarHidden(hidden, animation)

Toggle visibility of the status bar.

Arguments

  • hidden (boolean) - If the status bar should be hidden.
  • animation (StatusBarAnimation) - Animation to use when toggling hidden, defaults to 'none'.

setStatusBarNetworkActivityIndicatorVisible(visible)

Toggle visibility of the network activity indicator. [iOS only]

Arguments

  • visible (boolean) - If the network activity indicator should be visible.

setStatusBarStyle(style)

Set the bar style of the status bar.

Arguments

setStatusBarTranslucent(translucent)

Set the translucency of the status bar. [Android only]

Arguments

  • translucent (boolean) - Whether the app can draw under the status bar. When true, content will be rendered under the status bar. This is always true on iOS and cannot be changed.

Types

StatusBarAnimation

A string, either: 'none', 'fade', or 'slide'.

StatusBarProps

See the props of the StatusBar component.

StatusBarStyle

A string, either: 'auto', 'inverted', 'light', or 'dark'.
⚠️ auto and inverted do not automatically detect color scheme on SDK 37. This is only available in SDK 38 and higher.