Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-native-community/react-native-navbar
Navbar component for React Native
https://github.com/react-native-community/react-native-navbar
Last synced: 10 days ago
JSON representation
Navbar component for React Native
- Host: GitHub
- URL: https://github.com/react-native-community/react-native-navbar
- Owner: Kureev
- License: mit
- Created: 2015-03-30T21:55:57.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-05-16T16:54:29.000Z (over 2 years ago)
- Last Synced: 2024-10-29T17:56:26.117Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 786 KB
- Stars: 1,895
- Watchers: 41
- Forks: 318
- Open Issues: 64
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome - react-native-navbar - Navbar component for React Native (JavaScript)
README
## Customizable navbar for react-native
### 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 (
);
}
```
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://reactnative.dev/docs/text.html#ellipsizemode) the text
- **numberOfLines** - (Number) - How to [truncate](https://reactnative.dev/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)