react-native-custom-statusbar

A library to help you create StatusBar in react native for iphones(all) and android.

Installing

npm i react-native-custom-statusbar --save

npm add react-native-custom-statusbar

Example

// in App.js or App.tsx

import React from 'react';
import StatusBarCustom from 'react-native-custom-statusbar';

const App: React.FC = () => {
  return (
    <StatusBarCustom backgroundColor="#0e502b" barStyle="light-content">
      { your components }
    </StatusBarCustom>
  );
}

export default App;

Properties

Any StatusBar property and the following:

Exclusive properties for IPhone X + (X, XR, 11, 12)

| Prop | type | Description | Android | Ios | | ------------------ | ------- | ----------------------------------------- | ----------- | ----------- | | isHelper | boolean | Enables the helper for IPhone you own | None | >= Iphone X | | colorHelper | string | Set color helper default is #FFFFFF | None | >= Iphone X |

Examples:

isHelper (true) and color '#63b788'

isHelper (false)

Properties StatusBar is working in Ios

| Prop | type | Description | Android | Ios | | ------------------ | ------- | ----------------------------------------- | ----------- | ----------- | | translucent | boolean | enable translucentin android and ios | all | all | | hidden | boolean | hidden StatusBar in android and ios | all | all |

Examples:

translucent (true)

hidden (true)

normal - translucent (false) and hidden (false)

Licence

MIT