React-Native-Smart-Status-Bar

| | Status | | - | - | | Dependencies | | | Package |

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

1. Check changelog.md for all the changes