React Native Smart Status Bar

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.

Note

If you find this repo interesting do not forgot to give it a star.
If you have a feature request than open it on github and feature should be added within 2-7 days (author of the repo would keep you updated)
If you find a bug, open an issue on github and author would fix it less than 24 hours

Installation

npm i react-native-device-info
npm i react-native-smart-statusbar

For IOS

cd ios
pod install

for people using RN <= 0.59, please read the installation instruction from react-native-device-info repo

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
statusBarHiddenForNonNotch	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:

Recent changes

Check changelog.md for all the changes

Download Details:

Author: blendtale

Source Code: https://github.com/blendtale/react-native-smart-statusbar

#react-native #react #mobile-apps