# react-native-navbar

> Simple customizable navbar component for react-native

Latest version **2.1.0** (published 2017-10-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-navbar
pnpm add react-native-navbar
yarn add react-native-navbar
bun add react-native-navbar
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2017-10-30 |
| First published | 2015-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-native-navbar) |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1882 |
| Author | Alexey Kureev |
| Maintainers | kureev |
| Keywords | react-native, navbar |

## Links

- npm: https://www.npmjs.com/package/react-native-navbar
- Repository: https://github.com/react-native-community/react-native-navbar
- Issues: https://github.com/react-native-community/react-native-navbar/issues
- npm.io page: https://npm.io/package/react-native-navbar

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## Recent versions

- 2.1.0 (latest) — 2017-10-30
- 1.0.0 (beta) — 2015-10-18
- 2.0.2 — 2017-10-30
- 2.0.1 — 2017-08-14
- 2.0.0 — 2017-08-11
- 1.8.0 — 2017-07-19
- 1.7.1 — 2017-03-30
- 1.7.0 — 2017-03-26
- 1.6.3 — 2017-03-06
- 1.6.2 — 2017-02-28
- 1.6.1 — 2017-02-26
- 1.6.0 — 2016-12-29
- 1.5.4 — 2016-09-27
- 1.5.3 — 2016-09-27
- 1.5.1 — 2016-09-13
- … 56 more at https://npm.io/package/react-native-navbar/versions

## README

## Customizable navbar for react-native
![react-native-side-menu demo](https://habrastorage.org/files/1b4/9cd/9d0/1b49cd9d0d054cada8ebef5e2326e10d.png)

### Content
- [Installation](#installation)
- [Examples](#examples)
- [Getting started](#getting-started)
- [API](#api)
- [Usage with webpack](#usage-with-webpack)
- [Questions?](#questions)

### Examples
- [Basic](https://github.com/Kureev/react-native-navbar/tree/master/examples/Basic)
- [Custom Elements](https://github.com/Kureev/react-native-navbar/tree/master/examples/CustomElements)
- [Routing](https://github.com/Kureev/react-native-navbar/tree/master/examples/Routing)

### Getting started
- Install `react-native-navbar`:
  - By using `yarn`:
    ```
    $ yarn add react-native-navbar
    ```
  - By using `npm`:
    ```
    $ npm install react-native-navbar --save
    ```

- Import it in the file where you want to use it:
  ```jsx
  import NavigationBar from 'react-native-navbar';
  ```

- Add it to your React element tree:
```jsx
const styles = {
  container: {
    flex: 1,
  },
};

const rightButtonConfig = {
  title: 'Next',
  handler: () => alert('hello!'),
};

const titleConfig = {
  title: 'Hello, world',
};

function ComponentWithNavigationBar() {
  return (
    <View style={styles.container}>
      <NavigationBar
        title={titleConfig}
        rightButton={rightButtonConfig}
      />
    </View>
  );
}
```

That's it, you're ready to go!

### API
- **style** - (Object, Array) - Style object or array of style objects
- **containerStyle** - (Object) - Style object for styling navbar container
- **tintColor** - (String) - NavigationBar's tint color
- **statusBar** - (Object):
  - **style** - ('light-content' or 'default') - Style of statusBar
  - **hidden** - (Boolean)
  - **tintColor** - (String) - Status bar tint color
  - **hideAnimation** - ('fade', 'slide', 'none') - Type of statusBar hide animation
  - **showAnimation** - ('fade', 'slide', 'none') - Type of statusBar show animation
- **leftButton / rightButton** - (Object, React Element) - Either plain object with configuration, or React Element which will be used as a custom left/right button element. Configuration object has following keys:
  - **title** - (String) - Button's title
  - **tintColor** - (String) - Button's text color
  - **style** - (Object, Array) - Style object or array of style objects
  - **handler** - (Function) - onPress function handler
  - **disabled** - (Boolean) - If true, disable interactions for this button.
  - **accessible** - (Boolean) - Indicates that the view is an accessibility element
  - **accessibilityLabel** - (String, React Element) - Overrides the text that's read by the screen reader for the button.
- **title** - (Object, React Element) - Either plain object with configuration, or React Element which will be used as a custom title element. Configuration object has following keys:
  - **title** - (String) - Button's title
  - **style** - (Object, Array, Number) - Style object or array of style objects
  - **tintColor** - (String) - Title's text color
  - **ellipsizeMode** - ('head', 'middle', 'tail', 'clip') - How to [display](https://facebook.github.io/react-native/docs/text.html#ellipsizemode) the text
  - **numberOfLines** - (Number) - How to [truncate](https://facebook.github.io/react-native/docs/text.html#numberoflines) the text

### Usage with Webpack
This module uses JSX syntax and requires a compiler such as [babel](https://babeljs.io/).
React Native's packager runs this automatically but if you use Webpack be sure
to compile this module from your dependencies
```javascript
loaders: [{
  test: /\.js$/,
   include: [
     path.resolve(__dirname, "src"),
     path.resolve(__dirname, "node_modules/react-native-navbar")
   ],
  loader: 'babel',
  query: { stage: 0, plugins: [] }
}]
```

### Questions?
Feel free to ping me on [twitter](https://twitter.com/kureevalexey)
If you want to report a bug, please [submit an issue!](https://github.com/react-native-community/react-native-navbar/issues/new)

---
_Source: https://npm.io/package/react-native-navbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._