React Native StatusBar Component

The following approach covers how to control StatusBar in react-native. For this, we are going to use the StatusBar component. It is an interface at the top of the screen that displays the notification icons.

Syntax:

<StatusBar
  backgroundColor="#"
  barStyle={}
  showHideTransition={}
  hidden={} 
/>

Props in StatusBar:

• animated: If the transition between status bar property changes should be animated.
• backgroundColor: It is the background color of the status bar. It is only for android devices.
• barStyle: It sets the color of the status bar text.
• hidden: It hides the status bar.
• networkActivityIndicatorVisible: If the network activity indicator should be visible. It is only for IOS devices.
• showHideTransition: The transition effect when showing and hiding the status bar using the hidden prop.
• translucent: If true, then the app will draw under the status bar.

Methods in StatusBar:

• popStackEntry(): It gets and removes the last StatusBar entry from the stack.
• pushStackEntry(): It pushes a StatusBar entry onto the stack.
• replaceStackEntry(): It replaces an existing StatusBar stack entry with new props.
• setBackgroundColor(): It set the background color for the status bar. It is only available for android devices.
• setBarStyle(): It set the status bar style.
• setHidden(): It shows or hides the status bar.
• setNetworkActivityIndicatorVisible(): It controls the visibility of the network activity indicator. It is only available for IOS devices.
• setTranslucent(): It controls the translucency of the status bar.

Now let’s start with the implementation:

• Step 1: Open your terminal and install expo-cli by the following command.

  npm install -g expo-cli

• Step 2: Now create a project by the following command.

  expo init myapp

• Step 3: Now go into your project folder i.e. myapp

  cd myapp

Project Structure: It will look like the following.

Example: Now let’s implement the StatusBar. Here we created two buttons, the first button hides the status bar and the second button change’s the style of the status bar.

App.js

App.js

import React , {useState} from 'react';
import { StyleSheet, View , Button , StatusBar } from 'react-native';
const STYLE = ['default', 'dark-content', 'light-content'];
export default function App() {
  let index = 0;
  const [hidden , sethidden] = useState(false);
  const [styleBar , setBar] = useState(STYLE[0]);
  const changeStyle = () => {
    index += 1;
    if(index == 3)
    {
      index = 0;
    }
    setBar(STYLE[index]);
  }
  return (
    <View style={styles.container}>
        <StatusBar
          hidden={hidden}
          animated={true}
          backgroundColor="#61dafb"
          barStyle={styleBar}
          showHideTransition={'fade'}
        />
        <View style={styles.button}>
        <Button
          title={"Hide StatusBar"}
          onPress={()=>{sethidden(!hidden)}}
        />
        </View>
        <View style={styles.button}>
        <Button
          title={"Change Style"}
          onPress={changeStyle}
        />
        </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text : {
    fontSize : 40,
    marginBottom : 30
  },
  button : {
    margin : 20,
    width:200,
  }
});

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again. 

Reference: https://reactnative.dev/docs/statusbar