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.
- 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
npm i react-native-device-info
npm i react-native-smart-statusbar
cd ios
pod install
for people using RN <= 0.59, please read the installation instruction from react-native-device-info
repo
<SafeAreaViewDecider statusBarHiddenForNotch={true} />
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
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:
- Check changelog.md for all the changes