{"id":13404130,"url":"https://github.com/timomeh/react-native-material-bottom-navigation","last_synced_at":"2025-03-14T09:30:39.903Z","repository":{"id":57338261,"uuid":"82744248","full_name":"timomeh/react-native-material-bottom-navigation","owner":"timomeh","description":"💅🔧👌 a beautiful, customizable and easy-to-use material design bottom navigation for react-native","archived":false,"fork":false,"pushed_at":"2020-04-22T18:32:33.000Z","size":2724,"stargazers_count":709,"open_issues_count":6,"forks_count":127,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-08-30T20:21:09.919Z","etag":null,"topics":["bottomnavigation","material-design","react-native","react-native-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timomeh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-22T01:02:18.000Z","updated_at":"2024-08-05T11:56:35.000Z","dependencies_parsed_at":"2022-08-31T03:51:44.432Z","dependency_job_id":null,"html_url":"https://github.com/timomeh/react-native-material-bottom-navigation","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timomeh%2Freact-native-material-bottom-navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timomeh%2Freact-native-material-bottom-navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timomeh%2Freact-native-material-bottom-navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timomeh%2Freact-native-material-bottom-navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timomeh","download_url":"https://codeload.github.com/timomeh/react-native-material-bottom-navigation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221453985,"owners_count":16824573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bottomnavigation","material-design","react-native","react-native-component"],"created_at":"2024-07-30T19:01:39.496Z","updated_at":"2024-10-25T19:30:15.656Z","avatar_url":"https://github.com/timomeh.png","language":"JavaScript","funding_links":[],"categories":["React Native","JavaScript"],"sub_categories":["Components React Native"],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"/.github/logo.png\" width=\"612\" alt=\"react-native-material-bottom-navigation\" /\u003e\n\u003c/h1\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-material-bottom-navigation\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-native-material-bottom-navigation.svg?style=for-the-badge\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-material-bottom-navigation\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/react-native-material-bottom-navigation.svg?style=for-the-badge\" alt=\"downloads\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eA beautiful, customizable and easy-to-use\u003cbr /\u003eMaterial Design Bottom Navigation for react-native.\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n- **Pure JavaScript.** No native dependencies. No linking. No obstacles.\n- **Looks beautiful.** Stunning and fluid animations. You won't believe it's not a native view.\n- **Customize it.** You can adjust nearly everything to make it fit perfectly to your app.\n- **Easy to use.** Uses established React patterns for both simple and advanced usage.\n- **Pluggable.** Includes customizable Tabs and Badges. Not enough? Create and use your own!\n\n\u003cbr /\u003e\n\n## Installation\n\n```sh\nnpm install react-native-material-bottom-navigation\n```\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Demo](#demo)\n- [Usage](#usage)\n- [Documentation](#documentation)\n- [Notes](#notes)\n- [Contribute](#contribute)\n- [Contributors](#contributors)\n- [License](#license)\n\n## Demo\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\".github/demo-shifting.gif\" width=\"400\" height=\"180\" /\u003e\u003cbr /\u003e\n  \u003cb\u003eShifting Tab\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\".github/demo-full.gif\" width=\"400\" height=\"180\" /\u003e\u003cbr /\u003e\n  \u003cb\u003eFull Tab\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\".github/demo-icon.gif\" width=\"400\" height=\"180\" /\u003e\u003cbr /\u003e\n  \u003cb\u003eIcon Tab\u003c/b\u003e\n\u003c/p\u003e\n\n## Usage\n\nThis 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).\n\nDive 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).\n\n```js\nimport BottomNavigation, {\n  FullTab\n} from 'react-native-material-bottom-navigation'\n\nexport default class App extends React.Component {\n  tabs = [\n    {\n      key: 'games',\n      icon: 'gamepad-variant',\n      label: 'Games',\n      barColor: '#388E3C',\n      pressColor: 'rgba(255, 255, 255, 0.16)'\n    },\n    {\n      key: 'movies-tv',\n      icon: 'movie',\n      label: 'Movies \u0026 TV',\n      barColor: '#B71C1C',\n      pressColor: 'rgba(255, 255, 255, 0.16)'\n    },\n    {\n      key: 'music',\n      icon: 'music-note',\n      label: 'Music',\n      barColor: '#E64A19',\n      pressColor: 'rgba(255, 255, 255, 0.16)'\n    }\n  ]\n\n  state = {\n    activeTab: 'games'\n  }\n\n  renderIcon = icon =\u003e ({ isActive }) =\u003e (\n    \u003cIcon size={24} color=\"white\" name={icon} /\u003e\n  )\n\n  renderTab = ({ tab, isActive }) =\u003e (\n    \u003cFullTab\n      isActive={isActive}\n      key={tab.key}\n      label={tab.label}\n      renderIcon={this.renderIcon(tab.icon)}\n    /\u003e\n  )\n\n  render() {\n    return (\n      \u003cView style={{ flex: 1 }}\u003e\n        \u003cView style={{ flex: 1 }}\u003e\n          {/* Your screen contents depending on current tab. */}\n        \u003c/View\u003e\n        \u003cBottomNavigation\n          activeTab={this.state.activeTab}\n          onTabPress={newTab =\u003e this.setState({ activeTab: newTab.key })}\n          renderTab={this.renderTab}\n          tabs={this.tabs}\n        /\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n**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)\n\n## Documentation\n\n- [Usage](/docs/Usage.md)\n- [API Reference](/docs/api)\n  - [`\u003cBadge /\u003e`](/docs/api/Badge.md)\n  - [`\u003cBottomNavigation /\u003e`](/docs/api/BottomNavigation.md)\n  - [`\u003cFullTab /\u003e`](/docs/api/FullTab.md)\n  - [`\u003cIconTab /\u003e`](/docs/api/IconTab.md)\n  - [`\u003cShiftingTab /\u003e`](/docs/api/ShiftingTab.md)\n\n## Notes\n\n### React Navigation Support\n\n**Check [this example](/examples/with-react-navigation.js) for a custom React Navigation integration.**\n\nIn 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).\n\nYou 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).\n\n### Updated Material Design Specs\n\nGoogle 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.\n\n## Contribute\n\nContributions are always welcome. Read more in the [Contribution Guides](CONTRIBUTING.md).\n\nPlease 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.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n| [\u003cimg src=\"https://avatars3.githubusercontent.com/u/4227520?v=4\" width=\"100px;\" alt=\"Timo Mämecke\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTimo Mämecke\u003c/b\u003e\u003c/sub\u003e](https://twitter.com/timomeh)\u003cbr /\u003e[🐛](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, \u0026 Feedback\") [👀](#review-timomeh \"Reviewed Pull Requests\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/11575429?v=4\" width=\"100px;\" alt=\"Shayan Javadi\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eShayan Javadi\u003c/b\u003e\u003c/sub\u003e](https://www.shayanjavadi.com/)\u003cbr /\u003e[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=ShayanJavadi \"Code\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/14214500?v=4\" width=\"100px;\" alt=\"David\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDavid\u003c/b\u003e\u003c/sub\u003e](https://github.com/davidmpr)\u003cbr /\u003e[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=davidmpr \"Code\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/19354816?v=4\" width=\"100px;\" alt=\"Jayser Mendez\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJayser Mendez\u003c/b\u003e\u003c/sub\u003e](http://steemia.io)\u003cbr /\u003e[📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=jayserdny \"Documentation\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/10601911?v=4\" width=\"100px;\" alt=\"Peter Kottas\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePeter Kottas\u003c/b\u003e\u003c/sub\u003e](https://www.facebook.com/tipsforholiday)\u003cbr /\u003e[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=PeterKottas \"Code\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/97068?v=4\" width=\"100px;\" alt=\"Matt Oakes\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMatt Oakes\u003c/b\u003e\u003c/sub\u003e](https://mattoakes.net)\u003cbr /\u003e[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=matt-oakes \"Code\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/1533112?v=4\" width=\"100px;\" alt=\"Keeley Carrigan\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKeeley Carrigan\u003c/b\u003e\u003c/sub\u003e](http://www.keeleycarrigan.com)\u003cbr /\u003e[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=keeleycarrigan \"Code\") |\n| :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/177857?v=4\" width=\"100px;\" alt=\"Sean Holbert\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSean Holbert\u003c/b\u003e\u003c/sub\u003e](http://www.twitter.com/wildseansy)\u003cbr /\u003e[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=wildseansy \"Code\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/9802139?v=4\" width=\"100px;\" alt=\"Alessandro Parolin\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlessandro Parolin\u003c/b\u003e\u003c/sub\u003e](https://github.com/aparolin)\u003cbr /\u003e[📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=aparolin \"Documentation\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/1837764?v=4\" width=\"100px;\" alt=\"Prashanth Acharya M\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePrashanth Acharya M\u003c/b\u003e\u003c/sub\u003e](https://github.com/prashantham)\u003cbr /\u003e[📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=prashantham \"Documentation\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/64609?v=4\" width=\"100px;\" alt=\"Alexey Tcherevatov\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlexey Tcherevatov\u003c/b\u003e\u003c/sub\u003e](https://github.com/lemming)\u003cbr /\u003e[💻](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\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/5009188?v=4\" width=\"100px;\" alt=\"Trevor Atlas\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTrevor Atlas\u003c/b\u003e\u003c/sub\u003e](https://blog.trevoratlas.com/)\u003cbr /\u003e[🐛](https://github.com/timomeh/react-native-material-bottom-navigation/issues?q=author%3Atrevor-atlas \"Bug reports\") |\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[MIT](LICENSE.md), © 2017 - present Timo Mämecke\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimomeh%2Freact-native-material-bottom-navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimomeh%2Freact-native-material-bottom-navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimomeh%2Freact-native-material-bottom-navigation/lists"}