{"id":4383,"url":"https://github.com/ilansas/react-native-navigation-drawer","last_synced_at":"2025-07-26T06:33:06.991Z","repository":{"id":34540032,"uuid":"38483780","full_name":"ilansas/react-native-navigation-drawer","owner":"ilansas","description":"A slide menu inspired from Android for React-Native","archived":false,"fork":false,"pushed_at":"2016-02-11T04:25:46.000Z","size":212,"stargazers_count":98,"open_issues_count":5,"forks_count":26,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-24T22:02:50.273Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ilansas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-03T09:11:00.000Z","updated_at":"2023-06-21T00:09:21.000Z","dependencies_parsed_at":"2022-09-08T14:02:33.777Z","dependency_job_id":null,"html_url":"https://github.com/ilansas/react-native-navigation-drawer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilansas%2Freact-native-navigation-drawer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilansas%2Freact-native-navigation-drawer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilansas%2Freact-native-navigation-drawer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilansas%2Freact-native-navigation-drawer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ilansas","download_url":"https://codeload.github.com/ilansas/react-native-navigation-drawer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227657565,"owners_count":17799984,"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":[],"created_at":"2024-01-05T20:17:10.207Z","updated_at":"2024-12-02T02:16:31.908Z","avatar_url":"https://github.com/ilansas.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Navigation","UI"],"readme":"# React Native Slide Menu (Navigation Drawer)\n## Description \nA slide menu as we can see in Android which permits to route an item from the menu to a view displayed on the front view (check out the example to create your routes). \n\nThis Slide Menu can be opened by sliding from the left or from the right as you choose (see the prop in the example)\nTo open it you have to slide from the right (or left) border (and not from anywhere on the screen).\n\n![alt tag](http://img11.hostingpics.net/pics/282364gif.gif)\n\n## Installation\n    $ npm i --save react-native-navigation-drawer\n\n## Usage Example\n```jsx\nvar SlideMenu = require('react-native-navigation-drawer');\nvar Menu = require('./menu.js');\n\nvar Pages = require('./pages.js');\nvar FirstPage = Pages.FirstPage;\nvar SecondPage = Pages.SecondPage;\n\nvar BasicExample = React.createClass({\n  getInitialState(fragmentId) {\n    return ({ route: 'firstpage' });\n  },\n    \n  updateFrontView() {\n    //routing your pages here, don't forget to add a section in the menu ;)\n    switch (this.state.route) {\n      case 'firstpage':\n        return \u003cFirstPage /\u003e;\n      case 'secondpage':\n        return \u003cSecondPage /\u003e;\n    }\n  },\n\n  routeFrontView(fragmentId) {\n    this.setState({ route: fragmentId });\n  },\n    \n  render() {\n    var fragment = this.updateFrontView();\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cSlideMenu frontView={fragment} routeFrontView={this.routeFrontView}\n          menu={\u003cMenu /\u003e} slideWay='left' moveFrontView={false} width={200}/\u003e\n      \u003c/View\u003e\n    );\n  }\n});\n```    \nMore details about pages and Menu in the project example.\n\n## Properties\n- `frontView`: the fragment to be displayed on the main view\n- `routeFrontView`: callback to update the main view\n- `menu`: the menu component\n- `slideWay`: the side where the menu should come from (left or right, right is default)\n- `moveFrontView`: either the menu should move the front view or overlay it\n- `width`: width of the menu\n\n## Methods\nUse it with `this.refs` \n- `blockSlideMenu(boolean)`: to block the sliding when Slide Menu shouldn't open\n\n## TODO\n- [ ] Improve acceleration\n- [ ] Choose animation\n- [x] Choose size of the menu\n- [x] Choose if the panel overlays the front view or if it moves the front view (like it is right now)\n- [x] Choose slide way (from left or right)\n- [x] Block slide menu when we decide to\n- [x] Publish to npm\n- [x] Implement routes\n- [x] Create an example project\n\n## Credits\nThe slide menu has been inspired from these two projects:\n- [Simple Slide Menu with React Native from Terlici](http://www.terlici.com/2015/04/06/simle-slide-menu-react-native.html)\n- [react-native-side-menu](https://github.com/Kureev/react-native-side-menu)\n\nThanks guys for the good work ;)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filansas%2Freact-native-navigation-drawer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Filansas%2Freact-native-navigation-drawer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filansas%2Freact-native-navigation-drawer/lists"}