StatusBar

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;

StatusBar.currentHeight

StatusBar.pushStackEntry(props: StatusBarProps): StatusBarStackEntry

const stackEntry = StatusBar.pushStackEntry({ barStyle: 'light-content' });
// ... later
StatusBar.popStackEntry(stackEntry);

StatusBar.popStackEntry(entry: StatusBarStackEntry): void

StatusBar.replaceStackEntry(
  entry: StatusBarStackEntry,
  props: StatusBarProps
): StatusBarStackEntry

StatusBar.setHidden(hidden: boolean, animation?: StatusBarAnimation): void

StatusBar.setBarStyle(style: StatusBarStyle, animated?: boolean): void

StatusBar.setBackgroundColor(color: ColorValue, animated?: boolean): void

StatusBar.setTranslucent(translucent: boolean): void

StatusBar.setNetworkActivityIndicatorVisible(visible: boolean): void

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

<View>
  <StatusBar barStyle="dark-content" />
  <Modal visible={modalVisible}>
    <StatusBar barStyle="light-content" />
    {/* Modal content */}
  </Modal>
</View>