Guides
Plan-enterprise-icon
Expo Application Services
API Reference

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
Status-success-iconStatus-success-iconStatus-success-iconStatus-success-iconStatus-success-icon
Info-icon
Web support
There is no API available on the web for controlling the operating system status bar, so expo-status-bar will noop, so it will do nothing, it will also not error.

Installation

Terminal
→ npx expo install expo-status-bar

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

Usage

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

const App = () => (
  <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>
);

export default App;

API

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

Component

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

Only for:
Android-iconAndroid

backgroundColor

Optional • Type: string

The background color of the status bar.

hidden

Optional • Type: boolean

If the status bar is hidden.

Only for:
Apple-iconiOS

hideTransitionAnimation

Optional • Type: StatusBarAnimation • Default: 'fade'

The transition effect when showing and hiding the status bar using the hidden prop.

Only for:
Apple-iconiOS

networkActivityIndicatorVisible

Optional • Type: boolean

If the network activity indicator should be visible.

style

Optional • Type: StatusBarStyle • Default: 'auto'

Sets the color of the status bar text. Default value is "auto" which picks the appropriate value according to the active color scheme, eg: if your app is dark mode, the style will be "light".

Only for:
Android-iconAndroid

translucent

Optional • Type: boolean

If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is the default behaviour in projects created with Expo tools because it is consistent with iOS.

Methods

Only for:
Android-iconAndroid

StatusBar.setStatusBarBackgroundColor(backgroundColor, animated)

NameTypeDescription
backgroundColorstring

The background color of the status bar.

animatedboolean

true to animate the background color change, false to change immediately.

Set the background color of the status bar.

Returns

  • Undo-iconvoid

StatusBar.setStatusBarHidden(hidden, animation)

NameTypeDescription
hiddenboolean

If the status bar should be hidden.

animationStatusBarAnimation

Animation to use when toggling hidden, defaults to 'none'.

Toggle visibility of the status bar.

  • Undo-iconvoid
Only for:
Apple-iconiOS

StatusBar.setStatusBarNetworkActivityIndicatorVisible(visible)

NameTypeDescription
visibleboolean

If the network activity indicator should be visible.

Toggle visibility of the network activity indicator.

  • Undo-iconvoid

StatusBar.setStatusBarStyle(style)

NameTypeDescription
styleStatusBarStyle

The color of the status bar text.

Set the bar style of the status bar.

  • Undo-iconvoid
Only for:
Android-iconAndroid

StatusBar.setStatusBarTranslucent(translucent)

NameTypeDescription
translucentboolean

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.

Set the translucency of the status bar.

  • Undo-iconvoid

Types

StatusBarAnimation

string - Acceptable values are: 'none', 'fade', 'slide'.

StatusBarStyle

string - Acceptable values are: 'auto', 'inverted', 'light', 'dark'.

  • Message-iconAsk a question on the forums about StatusBar
  • Github-iconView open bug reports for StatusBar
  • Code-iconView source code for StatusBar
  • Build-iconView package in npm Registry
  • Edit-iconEdit this page

Was this doc helpful?