RNS statusbar component with SafeArea view comp, that uses native Android and iOS enhancements allowing you to set/get statusbar color and height.
npm install rns-statusbarA modern, lightweight, and high-performance React Native + Expo native module for managing the status bar height and background color across both Android and iOS.
Includes an optional SafeArea wrapper component for simplified layout handling and improved visual consistency.
Built natively using Kotlin (Android) and Swift (iOS) for maximum performance and reliability.
---
- โ
Dynamic, per-device status bar height retrieval
- โ
Hex-based status bar background color control
- โ
Current color getter for runtime queries
- โ
Simple React hook and SafeArea wrapper component
- โ
100% compatible with Expo EAS Build and bare React Native
- โ
Full TypeScript support (auto-complete and type definitions)
---
bash
npm install rns-statusbar
`$3
`bash
yarn add rns-statusbar
`---
โ๏ธ Expo / EAS Setup
If you use Expo Prebuild / EAS Build, the plugin is automatically registered in your configuration.
You can confirm that your
app.json or app.config.js includes:`json
{
"expo": {
"plugins": ["rns-statusbar"]
}
}
`Then rebuild your native project:
`bash
npx expo prebuild
`For local production builds:
`bash
eas build --platform android --local
`---
๐งฑ Bare React Native Setup
If using plain React Native (without Expo):
$3
1. Install the package
2. Navigate to iOS directory and install pods
`bash
cd ios && pod install
`
3. Rebuild your project.$3
1. Install the package
2. Sync Gradle and rebuild your project.---
๐งฉ Usage Example
`js
import React, { useEffect } from 'react';
import {
SafeArea,
getStatusBarHeight,
getStatusBarColor,
setStatusBarColor,
useTopPadding,
} from 'rns-statusbar';export default function App() {
const topPadding = useTopPadding();
useEffect(() => {
setStatusBarColor('#20232a'); // Set background color
getStatusBarHeight().then(console.log); // Log status bar height
getStatusBarColor().then(console.log); // Log current color
}, []);
return (
Hello Status Bar!
);
}
`---
๐ง API Reference
$3
| Function | Type | Description |
|-----------|------|-------------|
|
getStatusBarHeight() | Promise | Returns status bar height in dp (defaults to 24). |
| getStatusBarColor() | Promise | Returns current status bar color (hex string). |
| setStatusBarColor(color: string) | Promise | Updates status bar background color. |
| getTopPadding() | Promise | Cached getter for status bar height. |
| useTopPadding() | () => number | React hook returning the top padding. |---
$3
Cross-platform container ensuring UI content is rendered safely beneath the status bar.
When used, it automatically handles keyboard visibility and eliminates the need for
KeyboardAvoidingView.`tsx
{children}
`| Prop | Type | Description |
|------|------|-------------|
|
style | ViewStyle | StyleProp | Custom container style. |
| children | React.ReactNode | Nested content. |---
๐งพ TypeScript Support
Type definitions (
index.d.ts) are included by default, ensuring full IDE support:`ts
import { getStatusBarHeight, SafeArea, getStatusBarHeight, getStatusBarColor, setStatusBarColor, useTopPadding } from 'rns-statusbar';
`---
๐งโ๐ป Development & Local Testing
To test your local changes in another app:
`bash
from your test app folder
yarn add file:../rns-statusbar
npx pod-install ios
``---
MIT License ยฉ 2025 โ Raiidr
---
Contributions are welcome!
If you encounter a bug or want to suggest a feature, open an issue or submit a pull request on GitHub.