Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/timomeh/react-native-material-bottom-navigation
💅🔧👌 a beautiful, customizable and easy-to-use material design bottom navigation for react-native
https://github.com/timomeh/react-native-material-bottom-navigation
bottomnavigation material-design react-native react-native-component
Last synced: about 2 months ago
JSON representation
💅🔧👌 a beautiful, customizable and easy-to-use material design bottom navigation for react-native
- Host: GitHub
- URL: https://github.com/timomeh/react-native-material-bottom-navigation
- Owner: timomeh
- License: mit
- Created: 2017-02-22T01:02:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-22T18:32:33.000Z (over 4 years ago)
- Last Synced: 2024-06-16T02:41:09.235Z (3 months ago)
- Topics: bottomnavigation, material-design, react-native, react-native-component
- Language: JavaScript
- Homepage:
- Size: 2.6 MB
- Stars: 704
- Watchers: 14
- Forks: 127
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-material-design - react-native-material-bottom-navigation - Material bottom navigation for RN (React Native / Components React Native)
README
A beautiful, customizable and easy-to-use
Material Design Bottom Navigation for react-native.
- **Pure JavaScript.** No native dependencies. No linking. No obstacles.
- **Looks beautiful.** Stunning and fluid animations. You won't believe it's not a native view.
- **Customize it.** You can adjust nearly everything to make it fit perfectly to your app.
- **Easy to use.** Uses established React patterns for both simple and advanced usage.
- **Pluggable.** Includes customizable Tabs and Badges. Not enough? Create and use your own!
## Installation
```sh
npm install react-native-material-bottom-navigation
```
## Table of Contents
- [Installation](#installation)
- [Demo](#demo)
- [Usage](#usage)
- [Documentation](#documentation)
- [Notes](#notes)
- [Contribute](#contribute)
- [Contributors](#contributors)
- [License](#license)
## Demo
Shifting Tab
Full Tab
Icon Tab
## Usage
This library uses ["render props"](https://reactjs.org/docs/render-props.html) as established pattern for component composition. The example below illustrates the basic usage of the Bottom Navigation. All available Props are listed in the [Documentation](#documentation).
Dive into the example below, check out [the example app](/examples/Playground) and take a look at the [Usage Documentation](https://timomeh.gitbook.io/material-bottom-navigation/usage).
```js
import BottomNavigation, {
FullTab
} from 'react-native-material-bottom-navigation'
export default class App extends React.Component {
tabs = [
{
key: 'games',
icon: 'gamepad-variant',
label: 'Games',
barColor: '#388E3C',
pressColor: 'rgba(255, 255, 255, 0.16)'
},
{
key: 'movies-tv',
icon: 'movie',
label: 'Movies & TV',
barColor: '#B71C1C',
pressColor: 'rgba(255, 255, 255, 0.16)'
},
{
key: 'music',
icon: 'music-note',
label: 'Music',
barColor: '#E64A19',
pressColor: 'rgba(255, 255, 255, 0.16)'
}
]
state = {
activeTab: 'games'
}
renderIcon = icon => ({ isActive }) => (
)
renderTab = ({ tab, isActive }) => (
)
render() {
return (
{/* Your screen contents depending on current tab. */}
this.setState({ activeTab: newTab.key })}
renderTab={this.renderTab}
tabs={this.tabs}
/>
)
}
}
```
**Note:** Out-of-the-box support for React Navigation (called `NavigationComponent` in earlier releases) was removed with v1. Check [this example](/examples/with-react-navigation.js) for a custom React Navigation integration. [Read more...](#react-navigation-support)
## Documentation
- [Usage](/docs/Usage.md)
- [API Reference](/docs/api)
- [``](/docs/api/Badge.md)
- [``](/docs/api/BottomNavigation.md)
- [``](/docs/api/FullTab.md)
- [``](/docs/api/IconTab.md)
- [``](/docs/api/ShiftingTab.md)
## Notes
### React Navigation Support
**Check [this example](/examples/with-react-navigation.js) for a custom React Navigation integration.**
In contrary to earlier releases, this library does not support React Navigation _out of the box_. React Navigation now ships with its own Material Bottom Navigation: [`createMaterialBottomTabNavigator`](https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html).
You can still implement react-native-material-bottom-navigation manually by using React Navigation's [Custom Navigators](https://reactnavigation.org/docs/en/custom-navigators.html#api-for-building-custom-navigators). Check out [this example](/examples/with-react-navigation.js).
### Updated Material Design Specs
Google updated the Material Guidelines on Google I/O 2018 with new specifications, including a slightly changed Bottom Navigation and a new "App Bar Bottom" with a FAB in a centered cutout. react-native-material-bottom-navigation uses the _older_ specs.
## Contribute
Contributions are always welcome. Read more in the [Contribution Guides](CONTRIBUTING.md).
Please note that this project is released with a Contributor [Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
| [
Timo Mämecke](https://twitter.com/timomeh)
[🐛](https://github.com/timomeh/react-native-material-bottom-navigation/issues?q=author%3Atimomeh "Bug reports") [💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=timomeh "Code") [🎨](#design-timomeh "Design") [📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=timomeh "Documentation") [💡](#example-timomeh "Examples") [🚇](#infra-timomeh "Infrastructure (Hosting, Build-Tools, etc)") [🤔](#ideas-timomeh "Ideas, Planning, & Feedback") [👀](#review-timomeh "Reviewed Pull Requests") | [
Shayan Javadi](https://www.shayanjavadi.com/)
[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=ShayanJavadi "Code") | [
David](https://github.com/davidmpr)
[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=davidmpr "Code") | [
Jayser Mendez](http://steemia.io)
[📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=jayserdny "Documentation") | [
Peter Kottas](https://www.facebook.com/tipsforholiday)
[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=PeterKottas "Code") | [
Matt Oakes](https://mattoakes.net)
[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=matt-oakes "Code") | [
Keeley Carrigan](http://www.keeleycarrigan.com)
[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=keeleycarrigan "Code") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [
Sean Holbert](http://www.twitter.com/wildseansy)
[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=wildseansy "Code") | [
Alessandro Parolin](https://github.com/aparolin)
[📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=aparolin "Documentation") | [
Prashanth Acharya M](https://github.com/prashantham)
[📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=prashantham "Documentation") | [
Alexey Tcherevatov](https://github.com/lemming)
[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=lemming "Code") [🐛](https://github.com/timomeh/react-native-material-bottom-navigation/issues?q=author%3Alemming "Bug reports") | [
Trevor Atlas](https://blog.trevoratlas.com/)
[🐛](https://github.com/timomeh/react-native-material-bottom-navigation/issues?q=author%3Atrevor-atlas "Bug reports") |
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
## License
[MIT](LICENSE.md), © 2017 - present Timo Mämecke