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.
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
<SafeAreaViewDecider statusBarHiddenForNotch={true} />
Result:
<SafeAreaViewDecider statusBarHiddenForNotch={true} backgroundColor="blue"/>
Result:
<SafeAreaViewDecider statusBarHiddenForNonNotch={false} backgroundColor="blue"/>
Result:
Author: blendtale
Source Code: https://github.com/blendtale/react-native-smart-statusbar
#react-native #react #mobile-apps