Skip to main content
Component to control the app status bar. It is possible to have multiple StatusBar components mounted at the same time. The props will be merged in the order the StatusBar components were mounted.

​
Example

import React from 'react';
import { StatusBar, View, StyleSheet } from 'react-native';

const App = () => (
  <View style={styles.container}>
    <StatusBar
      barStyle="dark-content"
      backgroundColor="#ffffff"
      translucent={false}
    />
    {/* Your app content */}
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

​
Props

​
barStyle
'default' | 'light-content' | 'dark-content'
Sets the color of the status bar text.
  • 'default' - Default status bar style (dark for iOS, light for Android)
  • 'light-content' - Dark background, white texts and icons
  • 'dark-content' - Light background, dark texts and icons
​
animated
boolean
If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden.
​
hidden
boolean
If the status bar is hidden.

​
Android-Specific Props

​
backgroundColor
ColorValue
The background color of the status bar.Note: This prop has no effect on Android 15+Platform: Android
​
translucent
boolean
If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi-transparent status bar color.Note: This prop has no effect on Android 15+Platform: Android

​
iOS-Specific Props

​
networkActivityIndicatorVisible
boolean
If the network activity indicator should be visible.Platform: iOSDeprecated: Not supported in iOS 13+
​
showHideTransition
'fade' | 'slide' | 'none'
default:"'fade'"
The transition effect when showing and hiding the status bar using the hidden prop.Platform: iOS

​
Static Properties

​
currentHeight

StatusBar.currentHeight
The current height of the status bar on the device. Platform: Android

​
Static Methods

​
pushStackEntry()

StatusBar.pushStackEntry(props: StatusBarProps): StatusBarStackEntry
Push a StatusBar entry onto the stack. The return value should be passed to popStackEntry when complete. 
const stackEntry = StatusBar.pushStackEntry({ barStyle: 'light-content' });
// ... later
StatusBar.popStackEntry(stackEntry);

​
popStackEntry()

StatusBar.popStackEntry(entry: StatusBarStackEntry): void
Pop a StatusBar entry from the stack.

​
replaceStackEntry()

StatusBar.replaceStackEntry(
  entry: StatusBarStackEntry,
  props: StatusBarProps
): StatusBarStackEntry
Replace an existing StatusBar stack entry with new props.

​
setHidden()

StatusBar.setHidden(hidden: boolean, animation?: StatusBarAnimation): void
Show or hide the status bar. Note: Use pushStackEntry instead for better control.

​
setBarStyle()

StatusBar.setBarStyle(style: StatusBarStyle, animated?: boolean): void
Set the status bar style. Note: Use pushStackEntry instead for better control.

​
setBackgroundColor()

StatusBar.setBackgroundColor(color: ColorValue, animated?: boolean): void
Set the background color for the status bar. Platform: Android Note: Use pushStackEntry instead for better control.

​
setTranslucent()

StatusBar.setTranslucent(translucent: boolean): void
Control the translucency of the status bar. Platform: Android Note: Use pushStackEntry instead for better control.

​
setNetworkActivityIndicatorVisible()

StatusBar.setNetworkActivityIndicatorVisible(visible: boolean): void
Show or hide the network activity indicator. Platform: iOS Deprecated: Not supported in iOS 13+

​
Imperative API

For cases where using a component is not ideal, there are static methods to manipulate the StatusBar display stack. 
const openThirdPartyBugReporter = async () => {
  // The bug reporter has a dark background, so we push a new status bar style
  const stackEntry = StatusBar.pushStackEntry({ barStyle: 'light-content' });

  // `open` returns a promise that resolves when the UI is dismissed
  await BugReporter.open();

  // Don't forget to call `popStackEntry` when you're done
  StatusBar.popStackEntry(stackEntry);
};

​
Multiple StatusBar Components

You can have multiple StatusBar components mounted simultaneously. The props will be merged in the order they were mounted, with the most recently mounted component taking precedence: 
<View>
  <StatusBar barStyle="dark-content" />
  <Modal visible={modalVisible}>
    <StatusBar barStyle="light-content" />
    {/* Modal content */}
  </Modal>
</View>
When the modal is visible, the status bar will use light-content. When it’s dismissed, it will revert to dark-content.

​
Best Practices

  • Use the declarative component API when possible
  • Use pushStackEntry and popStackEntry for temporary status bar changes
  • Avoid using the legacy set* methods as they don’t update the internal stack
  • Remember that Android 15+ has restrictions on status bar customization

Build docs developers (and LLMs) love

Get started for freeTalk to us