Status bar in ReactNative

React-native status bar is used to show the indicators like a battery, Network, notification, signals, etc. The status bar in Ios and android are different. So, we need to calculate each height separately.

To import status bar in code

To import status bar in code

Background color is only supported in android, so in order to put background color in Ios, we need to wrap the status bar with view.

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

export const Header = () => {
  return (
    
      
        
    
  );
};

To Run the React Native App

Open the terminal again and jump into your project using.

cd ProjectName

To run the project on an Android Virtual Device or on real debugging device

react-native run-android

or on the iOS Simulator by running

react-native run-ios

That was the React Native Statusbar. If you have any doubts or you want to share something about the topic you can comment below.