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: