react native-tutorial

React Native StatusBar

The native status bar on Android and iOS devices can be styled and modified with the aid of the StatusBar component, which is exported by the react-native library. The StatusBar component from the react-native library is imported to use it. Multiple StatusBars can be used simultaneously.

Installation

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

Code

App.js

import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, SafeAreaView } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar />
      <Text>Now this is something cool</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

export default App;

This will give you the default status bar look no matter where you view it. Now, we’ll look into some props that we can use to design the status bar our own way.

Additional props

As this component is styled by the platform’s native design, it has three types of props:

  • Common props
  • Android-only props
  • iOS-only props

None of them are required, so you can still have a status bar without adding the component. We’ll discuss the components one by one.

Common props

barStyle

This defines what color the icons and text will be in the status bar.

barStyle takes one of three properties:

  • light-content
  • dark-content
  • default

<StatusBar barStyle="light-content" /> // left diagram
<StatusBar barStyle="dark-content" /> // right diagram

hidden

This allows you to hide/view your status bar as per your requirements.

animated

If this is marked as true, any changes in properties such as backgroundColor, barStyle, and hidden will undergo an animation while changing.

Android props

backgroundColor

With this, you can change the background color of the status bar.

iOS props

showHideTransition

showHideTransition controls whether the transition effect will take place while showing/hiding the status bar with the hidden prop.

networkActivityIndicatorVisible

This controls whether the network activity indicator should be visible or not.

This sums up all the props that can be utilized by StatusBar in React Native.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.