Status bar for react-native that intelligently handles safe area across iOS and Android

React-Native-Smart-Status-Bar

React Native Provides with Certain Api's whose scope is limited to either iOS or Android. With React-Native-Smart-Status-Bar we try to make status bar consistent across both Android iOS.

Basically, It handles safe area and background color across iOS and Android.

Installation

npm i react-native-smart-statusbar

Usage

<SafeAreaViewDecider statusBarHiddenForNotch={true} />

Props

React-Native-Smart-Status-Bar takes three things as props

Prop Type Default Required description
statusBarHiddenForNotch boolean false No Determines if status bar needs to be hidden or not for notch device
statusBarHiddenForNotch boolean false No Determines if status bar needs to be hidden or not for non notch device
backgroundColor string null No Adds background color consistent across iOS and Android device for Status bar

The React Native status bar also extends all the status bar props

Examples

Note: If you don't provide background color, it will take background as white by default

Example 1: Hidden for Notch with Background color null

<SafeAreaViewDecider statusBarHiddenForNotch={true} />

Result:

Example 2: Hidden for notch with Background color provided

<SafeAreaViewDecider statusBarHiddenForNotch={true} backgroundColor="blue"/> 

Result:

Example 3: Hidden for non notch with Background color provided

<SafeAreaViewDecider statusBarHiddenForNonNotch={false} backgroundColor="blue"/>

Result:

GitHub