https://github.com/mindinventory/react-native-top-navbar

This reactnative package provides custom header component for mobile apps. also providing utility method to change statusbar color.
https://github.com/mindinventory/react-native-top-navbar

actionbar header mobile-app navigation-header reactnative top-navigation-bar

Last synced: 2 months ago
JSON representation

This reactnative package provides custom header component for mobile apps. also providing utility method to change statusbar color.

• Host: GitHub
• URL: https://github.com/mindinventory/react-native-top-navbar
• Owner: Mindinventory
• License: mit
• Created: 2021-07-16T06:24:48.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-12-20T10:21:01.000Z (about 1 year ago)
• Last Synced: 2024-10-13T23:06:18.008Z (3 months ago)
• Topics: actionbar, header, mobile-app, navigation-header, reactnative, top-navigation-bar
• Language: TypeScript
• Homepage: https://www.mindinventory.com
• Size: 2.5 MB
• Stars: 33
• Watchers: 7
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native top-navbar🚀

[![npm version](https://img.shields.io/npm/v/@mindinventory/rn-top-navbar.svg)](<[https://www.npmjs.com/package/@mindinventory/rn-top-navbar](https://www.npmjs.com/package/@mindinventory/rn-top-navbar)>)

![@mindinventory/rn-top-navbar Top Language](https://img.shields.io/github/languages/top/Mindinventory/rn-top-navbar)

![@mindinventory/rn-top-navbar TypeScript](https://badgen.net/npm/types/tslib)

![@mindinventory/rn-top-navbar License](https://img.shields.io/github/license/Mindinventory/rn-top-navbar)

A **@mindinventory/rn-top-navbar** package is used to create custom navigation for React native apps.

Users can fully customize the navbar. you can change the background color of the status bar. Navigation can contain components like icons, images, and text.

![navbar](media/navbar.png)

![navbar_1](media/navbar_1.png)

![navbar_2](media/navbar_2.png)

![navbar_3](media/navbar_3.png)

![navbar_4](media/navbar_4.png)

### Installation

using npm:

```

npm install @mindinventory/rn-top-navbar

```

using yarn:

```

yarn add @mindinventory/rn-top-navbar

```

### Supported platform

- Android

- Ios

### Usage

```js

import Header from '@mindinventory/rn-top-navbar';

...

    

        

    

    

        Header Title

    

    

        

    

```

### Documentation

**Navbar container props**

| Prop | Type | description |

| --- | --- | --- |

| statusBarBackground | string | use for change background color of status bar. |

| barStyle | string | use for change content of status bar. |

| style | style | apply styles on navbar container. |

**Left container props**

| Prop | Type | description |

| --- | --- | --- |

| style | style | apply styles on left container. |

**Body container props**

| Prop | Type | description |

| --- | --- | --- |

| style | style | apply styles on body container. |

**Right container props**

| Prop | Type | description |

| --- | --- | --- |

| style | style | apply styles on right container. |

### LICENSE!

@mindinventory/rn-top-navbar is [MIT-licensed](https://github.com/Mindinventory/rn-top-navbar/blob/master/LICENSE).

# Let us know

If you use our open-source libraries in your project, please make sure to credit us and Give a star to www.mindinventory.com

Please feel free to use this component and Let us know if you are interested to building Apps or Designing Products.