Source: https://docs.expo.dev/versions/v53.0.0/sdk/status-bar

Hide navigation

Search

Ctrl K

Home Guides EAS Reference Learn

Reference version

SDK 53

Archive Expo Snack Discord and Forums Newsletter

Expo StatusBar

GitHub Changelog npm

A library that provides the same interface as the React Native StatusBar API, but with slightly different defaults to work great in Expo environments.

GitHub Changelog npm

Android

iOS

tvOS

Web

Bundled version:

~2.2.3

Copy page

---

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.

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

---

Terminal

Copy

- npx expo install expo-status-bar

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

Usage

---

Example

Copy

Open in Snack

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', }, });

Show More

API

---

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

Component

---

StatusBar

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component) <[StatusBarProps](https://docs.expo.dev/versions/v53.0.0/sdk/status-bar#statusbarprops) >

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.

StatusBarProps

animated

Optional • Type: boolean

If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden.

backgroundColor

Only for: 

Android

Optional • Type: string

The background color of the status bar.

hidden

Optional • Type: boolean

If the status bar is hidden.

hideTransitionAnimation

Only for: 

iOS

Optional • Type: [StatusBarAnimation](https://docs.expo.dev/versions/v53.0.0/sdk/status-bar#statusbaranimation)  • Default: 'fade'

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

networkActivityIndicatorVisible

Only for: 

iOS

Optional • Type: boolean

If the network activity indicator should be visible.

style

Optional • Type: [StatusBarStyle](https://docs.expo.dev/versions/v53.0.0/sdk/status-bar#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".

translucent

Only for: 

Android

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

---

StatusBar.setStatusBarBackgroundColor(backgroundColor, animated)

Only for: 

Android

| Parameter | Type | Description | | --- | --- | --- | | backgroundColor | [ColorValue](https://reactnative.dev/docs/colors) | The background color of the status bar. | | animated(optional) | boolean | true to animate the background color change, false to change immediately. |

Set the background color of the status bar.

Returns:

void

StatusBar.setStatusBarHidden(hidden, animation)

| Parameter | Type | Description | | --- | --- | --- | | hidden | boolean | If the status bar should be hidden. | | animation(optional) | [StatusBarAnimation](https://docs.expo.dev/versions/v53.0.0/sdk/status-bar#statusbaranimation) | Animation to use when toggling hidden, defaults to 'none'. |

Toggle visibility of the status bar.

Returns:

void

StatusBar.setStatusBarNetworkActivityIndicatorVisible(visible)

Only for: 

iOS

| Parameter | Type | Description | | --- | --- | --- | | visible | boolean | If the network activity indicator should be visible. |

Toggle visibility of the network activity indicator.

Returns:

void

StatusBar.setStatusBarStyle(style, animated)

| Parameter | Type | Description | | --- | --- | --- | | style | [StatusBarStyle](https://docs.expo.dev/versions/v53.0.0/sdk/status-bar#statusbarstyle) | The color of the status bar text. | | animated(optional) | boolean | If the transition should be animated. |

Set the bar style of the status bar.

Returns:

void

StatusBar.setStatusBarTranslucent(translucent)

Only for: 

Android

| Parameter | Type | Description | | --- | --- | --- | | 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. |

Set the translucency of the status bar.

Returns:

void

Types

---

StatusBarAnimation

Literal Type: string

Acceptable values are: 'none' | 'fade' | 'slide'

StatusBarStyle

Literal Type: string

Acceptable values are: 'auto' | 'inverted' | 'light' | 'dark'