1.1.0 • Published 3 months ago

@sominaththore/react-native-custom-status-bar v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

@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 NameTypeDefaultDescription
backgroundColorstring#ffffffSets the status bar background color
barStyle"light-content" \| "dark-content""dark-content"Sets the status bar text/icon color
hiddenbooleanfalseHides or shows the status bar

This package helps you customize the status bar easily in Android and iOS 🚀

1.1.0

3 months ago

1.0.9

3 months ago

1.0.8

4 months ago

1.0.7

4 months ago

1.0.6

4 months ago

1.0.5

4 months ago

1.0.4

4 months ago

1.0.3

4 months ago

1.0.2

4 months ago

1.0.1

4 months ago

1.0.0

4 months ago