Skip to content

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

Notifications You must be signed in to change notification settings

irohitb/react-native-smart-statusbar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

Screenshot 2019-09-03 at 12 37 21 PM

Example 2: Hidden for notch with Background color provided

<SafeAreaViewDecider statusBarHiddenForNotch={true} backgroundColor="blue"/> 

Result:

Screenshot 2019-09-03 at 12 39 17 PM

Example 3: Hidden for non notch with Background color provided

<SafeAreaViewDecider statusBarHiddenForNonNotch={false} backgroundColor="blue"/>

Result:

Screenshot 2019-09-03 at 12 50 39 PM

Recent changes

  1. Check changelog.md for all the changes

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published