React Native StatusBar

Introduction

StatusBar helps users maintain their orientation inside the mobile device's UI. Users can tell which area of the interface they are dealing with. Additionally, It allows users to recognize the difference between the system interface and the application's content area.

What is StatusBar?

StatusBar is a zone on smartphones and tablet screens. It's typically located at the top of the screen on mobile devices.

It provides important information about current time, wifi or cellular network information, internet speed information, and battery status icon.

StatusBar is often considered the single component of the System Bar. The status bar contains notification icons and system icons.

To access the notification shade, the user pulls down the status bar.

Basic Usage:

1. Toggle to show Status Bar

When we press on the button, it will hide and show the React Native StatusBar on the mobile device.

To use the StatusBar component, you need to import it from the 'react-native' library like this:

2. click to change the color of the status bar

Here we have created a list of color views; when we press on the view, it will change the StatusBar background color and content at the same time.

Create a list of Colour objects that contain the name of the color and the hexcode of that color.

data.js

created a custom StatusBar component, which can be reusable and can add as many properties as needed without worrying about duplication.

CustomStatusBar.js

create a View for each color component. This view component will map over the colors1 data object.

ColorBox.js

The app component holds two state variables: show and color. The show state variable is used to toggle the visibility of the status bar, and the colour state variable holds the currently selected colour.

The handleToggle function is responsible for toggling the show state variable when the button is pressed. The handleColor function is used to update the colour state variable when a colour is selected.

App.js

3. Navigate to change the color of the status bar

Home.js

Product.js

Profile.js

Update the App.js with the following code; create three stacks of screens for the navigation. i.e., ProductScreen, ProfileScreen.

Here is our application, built using StatusBar React Native.

Output:

React Native StatusBar Props

• animated:

  This animated prop allows the StatusBar component to be animated rather than applied immediately.

  It will support if any one of the following properties exists inside the StatusBar component: Those are backgroundColor, hidden, and barStyle

• barStyle:

  The barStyle property decides the style of the status bar content. Such as the text, background, and icons.

  barStyles depend upon the prop StatusBarStyle, whose type is enum, which defines a set of constant values.

  Value	Type	Description
  'default'	string	'dark-content' for android & 'light-content' for ios
  'light-content'	string	dark background & white text, icons
  'dark-content'	string	white background & dark texts and icons

• hidden:

  We can dynamically hide and show the StatusBar using this hidden property of the status bar component.

  The type of the prop is Boolean and the default value is false.

• backgroundColor:

  It customizes the background color of the StatusBar Component. By default, it is black only if there is no other system status bar background color.

  React Native has several color APIs designed to allow you to take full advantage of your platform's design and user preferences. like RGB, HSL, HWB, Color ints, Named Colors.

• translucent:

  The property enables the bar to look like a transparent glassmorphism design style. It takes a Boolean value; By default, it is false.

• networkActivityIndicatorVisible:

  This property of the StatusBar Component enables you to show and hide the network activity indicator in the status bar.

  The type of the prop is Boolean and has a value false by default.

• showHideTransition:

  This property is the same as the hidden property, but it is only limited to iOS devices.

  It supports an enum type, i.e., StatusBarAnimation. The default value is fade. The remaining support string values are slide and none.

React Native Status Methods

These React native StatusBar methods are useful for controlling the props inside any StatusBar Component. By the time of navigation, we can pop, push, and replace the props.

The Object should contain multiple status bar props.

• popStackEntry():

  This particular method returns or removes the last status bar entry from the stack. An entry should be mandatory if we want to remove an item from the StatusBar component stack.

• pushStackEntry():

  push a status bar entry to the component stack. And the returned value goes to the popStackEntry() method after this method's operation completion.

• replaceStackEntry():

  This method replaces an existing entry with new props. For the replacement, we need properties of pushStackEntry and objects of StatusBar props.

• setBarStyle():

  Update the StatusBar style with new StatusBarStyle properties.

• setHidden():

  Update StatusBar Component with the true and false values, same as hidden properties, and apply one optional argument, which is only supported for iOS devices.

• setBackgroundColor():

  It takes two arguments: one is background color and another is animation with a Boolean value, which is optional.

• setTranslucent():

  This method determines whether the status bar has a transparent look, allowing your application to extend behind it.

• setNetworkActivityIndicatorVisible():

  Controls the visibility of the network activity indicator in the status bar.