react-native-smart-statusbar

The smart status bar for react-native that intelligently handles safe area across iOS and Android, background color and all the props of navbar

Downloads
164
Stars
27
Committers
2

React-Native-Smart-Status-Bar

Status
Dependencies Dependencies Dev dependencies Peer dependencies
Package npm package version npm downloads Type definitions

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