@logicwind/react-native-status-bar-height

A simple and lightweight React Native package to get the status bar height and bottom safe area inset on both Android and iOS.

Installation

Using npm:

`sh md title="Terminal" npm install @logicwind/react-native-status-bar-height


or using yarn:

```sh md title="Terminal"
yarn add @logicwind/react-native-status-bar-height

iOS Setup

After installation, make sure to install CocoaPods:

`sh md title="Terminal" cd ios && pod install


### Android Setup

No additional setup is required.

## Usage

Import and use the utility functions to fetch values:

```tsx md title="App.tsx"
import {
  fetchStatusBarHeight,
  fetchBottonInset,
} from '@logicwind/react-native-status-bar-height';

const statusBarHeight = fetchStatusBarHeight();
const bottomInset = fetchBottonInset();

Example

tsx md title="App.tsx" <View style={{ flex: 1 }}> <Text style={{ marginTop: fetchStatusBarHeight() }}> Status Bar Height </Text> <View style={{ flex: 1 }} /> <Text style={{ marginBottom: fetchBottonInset() }}> Bottom Safe Area </Text> </View>

API

fetchStatusBarHeight(): number - Returns the status bar height in pixels.

fetchBottomInset(): number - Returns the bottom safe area inset in pixels, helpful for avoiding overlap with gesture/navigation bars.

How It Works

On iOS, it retrieves values using native APIs or falls back to common values.
On Android, it uses StatusBar.currentHeight for the status bar height, and WindowInsets for the bottom inset when available.
A fallback mechanism is in place to provide reasonable defaults.

react-native-status-bar-height is crafted mindfully at Logicwind

We are a 130+ people company developing and designing multiplatform applications using the Lean & Agile methodology. To get more information on the solutions that would suit your needs, feel free to get in touch by email or through or contact form!

We will always answer you with pleasure 😁

License

This project is licensed under the MIT License - see the LICENSE file for details

Package detail