{"id":4136,"url":"https://github.com/Tinysymphony/react-native-drawer-menu","last_synced_at":"2025-08-04T00:32:22.952Z","repository":{"id":46933988,"uuid":"81942248","full_name":"Tinysymphony/react-native-drawer-menu","owner":"Tinysymphony","description":"A drawer component for React Native Application.","archived":false,"fork":false,"pushed_at":"2022-10-05T15:26:39.000Z","size":8844,"stargazers_count":181,"open_issues_count":29,"forks_count":43,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-07-28T03:49:13.813Z","etag":null,"topics":["drawer","react","react-native"],"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/Tinysymphony.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-14T12:16:45.000Z","updated_at":"2025-03-22T08:26:27.000Z","dependencies_parsed_at":"2023-01-19T06:45:34.573Z","dependency_job_id":null,"html_url":"https://github.com/Tinysymphony/react-native-drawer-menu","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/Tinysymphony/react-native-drawer-menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinysymphony%2Freact-native-drawer-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinysymphony%2Freact-native-drawer-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinysymphony%2Freact-native-drawer-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinysymphony%2Freact-native-drawer-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tinysymphony","download_url":"https://codeload.github.com/Tinysymphony/react-native-drawer-menu/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinysymphony%2Freact-native-drawer-menu/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268634061,"owners_count":24281895,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["drawer","react","react-native"],"created_at":"2024-01-05T20:17:02.230Z","updated_at":"2025-08-04T00:32:22.236Z","avatar_url":"https://github.com/Tinysymphony.png","language":"JavaScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"## react-native-drawer-menu [![Build Status](https://travis-ci.org/Tinysymphony/react-native-drawer-menu.svg?branch=master)](https://travis-ci.org/Tinysymphony/react-native-drawer-menu) [![Coverage Status](https://coveralls.io/repos/github/Tinysymphony/react-native-drawer-menu/badge.svg?branch=master)](https://coveralls.io/github/Tinysymphony/react-native-drawer-menu?branch=master)\n\nA drawer component for React Native Application (ios / android)\n\nSimilar to drawer menu component of QQ mobile.\n\n### Examples\n\n#### iOS Platform\n\n\u003ca href=\"#ios-left\" id=\"ios-left\"\u003e\u003cimg src=\"./GIF/ios-left-default.gif\"  align=\"left\" width=\"200\"\u003e\u003c/a\u003e\n\n\u003ca href=\"#ios-right\" id=\"ios-right\"\u003e\u003cimg src=\"./GIF/ios-right-overlay.gif\" width=\"200\"/\u003e\u003c/a\u003e\n\n#### Android Platform\n\n\u003ca href=\"#android-left\" id=\"android-left\"\u003e\u003cimg src=\"./GIF/android-left-default.gif\"  align=\"left\" width=\"200\"\u003e\u003c/a\u003e\n\n\u003ca href=\"#android-right\" id=\"android-right\"\u003e\u003cimg src=\"./GIF/android-right-overlay.gif\"  width=\"200\"\u003e\u003c/a\u003e\n\n### Usage\n\n\u003e **SUGGESTION** In iOS, the drawer menu component should only be used in the top level route, because the action that swipes from left side of the screen to right is designed to pop route from navigate stack. You are supposed to avoid the conflict of the UI interactions. At least, don't use the `Left` drawer menu to wrap sub routes, use `Right` drawer menu if it's needed.\n\n**install from npm**\n\n``` shell\nnpm install --save react-native-drawer-menu\n```\n\n**import in project**\n\n``` js\nimport Drawer from 'react-native-drawer-menu';\nimport {Easing} from 'react-native'; // Customize easing function (Optional)\n```\n\n```js\n// in render function\nrender() {\n  // prepare your drawer content\n  var drawerContent = (\u003cView style={styles.drawerContent}\u003e\n    \u003cView style={styles.leftTop}/\u003e\n    \u003cView style={styles.leftBottom}\u003e\n      \u003cView\u003e\u003cText\u003eDrawer Content\u003c/Text\u003e\u003c/View\u003e\n    \u003c/View\u003e\n  \u003c/View\u003e);\n  // customize drawer's style (Optional)\n  var customStyles = {\n    drawer: {\n      shadowColor: '#000',\n      shadowOpacity: 0.4,\n      shadowRadius: 10\n    },\n    mask: {}, // style of mask if it is enabled\n    main: {} // style of main board\n  };\n  return (\n    \u003cDrawer\n      style={styles.container}\n      drawerWidth={300}\n      drawerContent={drawerContent}\n      type={Drawer.types.Overlay}\n      customStyles={{drawer: styles.drawer}}\n      drawerPosition={Drawer.positions.Right}\n      onDrawerOpen={() =\u003e {console.log('Drawer is opened');}}\n      onDrawerClose={() =\u003e {console.log('Drawer is closed')}}\n      easingFunc={Easing.ease}\n    \u003e\n      \u003cView style={styles.content}\u003e\n        \u003cText\u003e{Object.values(Drawer.positions).join(' ')}\u003c/Text\u003e\n        \u003cText\u003e{Object.values(Drawer.types).join(' ')}\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/Drawer\u003e\n  );\n}\n```\n\n\u003e Notice: The reference of the drawer is passed to drawer content element, you could use `this.props.drawer` to invoke Drawer's instance methods like `this.props.drawer.closeDrawer()`\n\n## Properties\n\n| Property | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | Bool | false | Disable the component or not. |\n| leftDisabled | Bool | false | Disable left drawer or not. |\n| rightDisabled | Bool | false | Disable right drawer or not. |\n| type | String | ‘default' | Type of the drawer. `default` / `overlay` You can also use static value `Drawer.types.Default` / `Drawer.types.Overlay`. |\n| drawerPosition | String | ‘left' | Determine where does the drawer come out. `left` / `right` / `both` You can also use static value `Drawer.positions.Left` / `Drawer.positions.Right` / `Drawer.positions.Both`. |\n| drawerWidth | Number | 200 | The width of drawer, it’s disabled when use `replace` type. |\n| drawerContent | React Component | null | The content of the drawer menu, default is left content. |\n| leftDrawerContent | React Component | null | The content of the left drawer menu. |\n| rightDrawerContent | React Component | null | The content of the right drawer menu. |\n| duration | Number | 160 | The duration of animation to open or close drawer. |\n| maskAlpha | Number | 0.4 | Maximum value is 0.5, the opactiy value of the mask over the main board when drawer is open. Mask can be disabled with `showMask` property. |\n| showMask | Bool | true | Whether show the mask when drawer is open. |\n| customStyles | Object | {} | Customize drawer styles. You can customize `main` / `mask` / `drawer` / `leftDrawer` / `rightDrawer`. |\n| onDrawerOpen | function | null | Triggers when drawer is totally opened. |\n| onLeftDrawerOpen | function | null | Triggers when the left drawer is totally opened. |\n| onRightDrawerOpen | function | null | Triggers when the right drawer is totally opened. |\n| onDrawerClose | function | null | Triggers when drawer is totally closed. |\n| onLeftDrawerClose | function | null | Triggers when the left drawer is totally closed. |\n| onRightDrawerClose | function | null | Triggers when the right drawer is totally closed. |\n| startCapture | Bool | false | Whether to capture touch events while clicking on screen. |\n| moveCapture | Bool | false | Whether to capture touch events while swiping over the screen. |\n| easingFunc | function | null | Easing function of drawer animation, default is `Easing.linear`. You can pass function like `Easing.ease`/`Easing.bezier(x1, y1, x2, y2)`/`Easing.sin`/`Easing.elastic(times)`/`Easing.bounce` etc.  |\n| responderNegotiate | function | null | Customize conditions to set pan responder, `evt` \u0026 `gestureState` will be passed as arguments. Default condition is left 20% area on screen in `left` Drawer, or right 20% area on screen in `right` Drawer. |\n\n\n### Instance methods\n\nUse ref to invoke instance methods.\n\n| Method | Description |\n| --- | --- |\n| openDrawer | Open drawer manually |\n| openLeftDrawer | Open left drawer manually |\n| openRightDrawer | Open right drawer manually |\n| closeDrawer | Close drawer manually. The drawerContent has a ref of drawer instance, you can also trigger with it. |\n| closeLeftDrawer | Close left drawer manually |\n| closeRightDrawer | Close right drawer manually |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTinysymphony%2Freact-native-drawer-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTinysymphony%2Freact-native-drawer-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTinysymphony%2Freact-native-drawer-menu/lists"}