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:

Screenshot 2019-09-03 at 12 37 21 PM

Example 2: Hidden for notch with Background color provided

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

Result:

Screenshot 2019-09-03 at 12 39 17 PM

Example 3: Hidden for non notch with Background color provided

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

Result:

Screenshot 2019-09-03 at 12 50 39 PM

Recent changes

  1. 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

React Native Smart Status Bar
30.35 GEEK