1.1.0 • Published 3 months ago
@sominaththore/react-native-custom-status-bar v1.1.0
@sominaththore/react-native-custom-status-bar
A customizable status bar component for React Native applications, supporting both Android and iOS platforms.
Features
- Set status bar color for both Android and iOS
- Customize status bar style (
light-content
,dark-content
) - Supports auto adjustment to the device's status bar height
Installation
Using npm:
npm install @sominaththore/react-native-custom-status-bar
Using yarn:
yarn add @sominaththore/react-native-custom-status-bar
Usage
Import and use the CustomStatusBar
component in your React Native app:
import React from 'react';
import { View, Text } from 'react-native';
import CustomStatusBar from '@sominaththore/react-native-custom-status-bar';
const App = () => {
return (
<View style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
{/* Customizable Status Bar */}
<CustomStatusBar backgroundColor="#6200ea" barStyle="light-content" />
<Text style={{ marginTop: 50, textAlign: 'center', fontSize: 20 }}>
Hello, World!
</Text>
</View>
);
};
export default App;
Props
Prop Name | Type | Default | Description |
---|---|---|---|
backgroundColor | string | #ffffff | Sets the status bar background color |
barStyle | "light-content" \| "dark-content" | "dark-content" | Sets the status bar text/icon color |
hidden | boolean | false | Hides or shows the status bar |
This package helps you customize the status bar easily in Android and iOS 🚀