# react-native-smart-statusbar

> The smart status bar for react-native that intelligently handles safe area across iOS and Android, background color etc

Latest version **1.0.24** (published 2021-08-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-smart-statusbar
pnpm add react-native-smart-statusbar
yarn add react-native-smart-statusbar
bun add react-native-smart-statusbar
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.24 |
| Published | 2021-08-04 |
| First published | 2019-08-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27 |
| Maintainers | irohitbhatia |
| Keywords | react-native, status-bar, react-native-status-bar, safe-area, safearea, react-native-safe-area |

## Links

- npm: https://www.npmjs.com/package/react-native-smart-statusbar
- Repository: https://github.com/irohitb/react-native-smart-statusbar
- Homepage: https://github.com/irohitb/react-native-smart-statusbar#readme
- Issues: https://github.com/irohitb/react-native-smart-statusbar/issues
- npm.io page: https://npm.io/package/react-native-smart-statusbar

## Dependencies (1)

- [react-native-device-info](https://npm.io/package/react-native-device-info.md) ^8.1.5

## Recent versions

- 1.0.24 (latest) — 2021-08-04
- 1.0.23 — 2021-02-25
- 1.0.22 — 2021-02-22
- 1.0.21 — 2021-02-22
- 1.0.20 — 2021-02-22
- 1.0.19 — 2021-02-20
- 1.0.17 — 2020-05-01
- 1.0.16 — 2020-01-16
- 1.0.15 — 2020-01-16
- 1.0.14 — 2020-01-16
- 1.0.13 — 2020-01-16
- 1.0.12 — 2020-01-16
- 1.0.10 — 2020-01-14
- 1.0.8 — 2019-10-09
- 1.0.7 — 2019-10-09
- … 7 more at https://npm.io/package/react-native-smart-statusbar/versions

## README

# React-Native-Smart-Status-Bar 

|  | Status |
| - | - |
| Dependencies | [![Dependencies](https://img.shields.io/david/blendtale/react-native-smart-statusbar)](https://david-dm.org/blendtale/react-native-smart-statusbar) [![Dev dependencies](https://img.shields.io/david/dev/blendtale/react-native-smart-statusbar)](https://david-dm.org/blendtale/react-native-smart-statusbar) [![Peer dependencies](https://img.shields.io/david/peer/blendtale/react-native-smart-statusbar)](https://david-dm.org/blendtale/react-native-smart-statusbar)|
| Package | [![npm package version](https://img.shields.io/npm/v/react-native-smart-statusbar)](https://www.npmjs.com/package/react-native-smart-statusbar) [![npm downloads](https://img.shields.io/npm/dt/react-native-smart-statusbar)](https://www.npmjs.com/package/react-native-smart-statusbar) ![Type definitions](https://img.shields.io/badge/types-TypeScript-blue.svg)

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](https://github.com/react-native-community/react-native-device-info)


## 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](https://facebook.github.io/react-native/docs/statusbar)


## Examples

<strong> Note: </strong> 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: 
			
<img width="351" alt="Screenshot 2019-09-03 at 12 37 21 PM" src="https://user-images.githubusercontent.com/32276134/64151256-98056100-ce47-11e9-9aaa-6b57298a213a.png">


### Example 2: Hidden for notch with Background color provided 

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

Result: 
 
 <img width="355" alt="Screenshot 2019-09-03 at 12 39 17 PM" src="https://user-images.githubusercontent.com/32276134/64151381-e1ee4700-ce47-11e9-96e2-e34bf3da31c1.png">
 

 ### Example 3:  Hidden for non notch with Background color provided 
 
```
<SafeAreaViewDecider statusBarHiddenForNonNotch={false} backgroundColor="blue"/>
```

Result: 

<img width="337" alt="Screenshot 2019-09-03 at 12 50 39 PM" src="https://user-images.githubusercontent.com/32276134/64152071-73aa8400-ce49-11e9-97eb-761d1d0bdd35.png">



### Recent changes 

1. Check changelog.md for all the changes

---
_Source: https://npm.io/package/react-native-smart-statusbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._