StatusBar Component

The StatusBar component in React Native is used to control the appearance and behavior of the status bar at the top of the device screen (where things like time, battery life, and network status are displayed). You can modify things like the background color, content style (light or dark), and visibility.

Here’s a basic guide to using the StatusBar component:

import React from 'react';

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

const App = () => {

  return (

    <View style={styles.container}>

      <StatusBar

        barStyle="light-content"  // Sets the text/icons to be light (use 'dark-content' for dark text/icons)

        backgroundColor="#6a51ae" // Android only: set the background color of the status bar

        hidden={false}            // Whether to hide the status bar

      />

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#6a51ae',

    justifyContent: 'center',

    alignItems: 'center',

  },

});

export default App;

Common Properties

• barStyle: Defines the style of the status bar content. Values can be:

  • "default" (default)
  • "light-content" (light icons and text)
  • "dark-content" (dark icons and text)

• backgroundColor: (Android only) Sets the background color of the status bar.

• hidden: A boolean that determines whether the status bar should be hidden.

• translucent: (Android only) Makes the status bar translucent. This allows the content of the app to be drawn under the status bar.

• networkActivityIndicatorVisible: (iOS only) Shows or hides the network activity indicator.