{"id":25407884,"url":"https://github.com/gaetanozappi/react-native-navigation-drawer-layout","last_synced_at":"2025-10-31T03:30:38.235Z","repository":{"id":57338608,"uuid":"146811315","full_name":"gaetanozappi/react-native-navigation-drawer-layout","owner":"gaetanozappi","description":"React Native library to generate navigation drawer layout.","archived":false,"fork":false,"pushed_at":"2019-07-10T12:46:00.000Z","size":453,"stargazers_count":27,"open_issues_count":2,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-17T13:49:36.409Z","etag":null,"topics":["drawer","drawer-android","drawer-layout","drawer-menu","drawer-navigation","drawerlayout","drawernavigator","navigation","navigation-drawer-layout","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":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gaetanozappi.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2018-08-30T22:03:41.000Z","updated_at":"2023-01-07T06:49:01.000Z","dependencies_parsed_at":"2022-09-07T11:50:48.048Z","dependency_job_id":null,"html_url":"https://github.com/gaetanozappi/react-native-navigation-drawer-layout","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/gaetanozappi%2Freact-native-navigation-drawer-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-native-navigation-drawer-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-native-navigation-drawer-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-native-navigation-drawer-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gaetanozappi","download_url":"https://codeload.github.com/gaetanozappi/react-native-navigation-drawer-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239098757,"owners_count":19581301,"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":["drawer","drawer-android","drawer-layout","drawer-menu","drawer-navigation","drawerlayout","drawernavigator","navigation","navigation-drawer-layout","react-native"],"created_at":"2025-02-16T07:19:09.217Z","updated_at":"2025-10-31T03:30:32.832Z","avatar_url":"https://github.com/gaetanozappi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native: react-native-navigation-drawer-layout\n\n[![GitHub package version](https://img.shields.io/github/package-json/v/gaetanozappi/react-native-navigation-drawer-layout.svg?style=flat\u0026colorB=2b7cff)](https://github.com/gaetanozappi/react-native-navigation-drawer-layout)\n[![github home](http://img.shields.io/npm/v/react-native-navigation-drawer-layout.svg?style=flat)](https://www.npmjs.com/package/react-native-navigation-drawer-layout)\n![platforms](https://img.shields.io/badge/platforms-Android-brightgreen.svg?style=flat\u0026colorB=191A17)\n[![github home](https://img.shields.io/badge/gaetanozappi-react--native--navigation--drawer--layout-blue.svg?style=flat)](https://github.com/gaetanozappi/react-native-navigation-drawer-layout)\n[![npm](https://img.shields.io/npm/dm/react-native-navigation-drawer-layout.svg?style=flat\u0026colorB=007ec6)](https://www.npmjs.com/package/react-native-navigation-drawer-layout)\n\n[![github issues](https://img.shields.io/github/issues/gaetanozappi/react-native-navigation-drawer-layout.svg?style=flat)](https://github.com/gaetanozappi/react-native-navigation-drawer-layout/issues)\n[![github closed issues](https://img.shields.io/github/issues-closed/gaetanozappi/react-native-navigation-drawer-layout.svg?style=flat\u0026colorB=44cc11)](https://github.com/gaetanozappi/react-native-navigation-drawer-layout/issues?q=is%3Aissue+is%3Aclosed)\n[![Issue Stats](https://img.shields.io/issuestats/i/github/gaetanozappi/react-native-navigation-drawer-layout.svg?style=flat\u0026colorB=44cc11)](http://github.com/gaetanozappi/react-native-navigation-drawer-layout/issues)\n[![github license](https://img.shields.io/github/license/gaetanozappi/react-native-navigation-drawer-layout.svg)]()\n\n\u003cimg src=\"https://github.com/gaetanozappi/react-native-navigation-drawer-layout/raw/master/screenshot/react-native-navigation-drawer-layout.png\" /\u003e       \n\n-   [Usage](#-usage)\n-   [License](#-license)\n\n## 📖 Getting started\n\n`$ npm install react-native-navigation-drawer-layout --save`\n\n`$ react-native link react-native-material-letter-icon`\n\n`$ react-native link react-native-vector-icons`\n\n## 💻 Usage\n\n```javascript\nimport * as React from 'react';\nimport { StyleSheet, View, Text } from 'react-native';\nimport NavigationDrawerLayout from 'react-native-navigation-drawer-layout';\n\nexport default class App extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      menu: '',\n      type: ''\n    };\n  }\n\n  render() {\n    return (\n      \u003cNavigationDrawerLayout\n        percent={75}\n        //statusBar=\"#008cff\"\n        //statusBarTransparency={0.3}\n        type={this.state.type}\n        drawerPosition=\"left\"\n        selected=\"opt0\"\n        window=\"menu\"\n        color=\"#fff\"\n        backgroundColor=\"#fff\" //303030\n        imageBackground={{ uri: \"https://c.wallhere.com/photos/aa/44/glare_colorful_bright_circles-679384.jpg!d\" }}\n        first={'username'}\n        second={'joined'}\n        account={[\n          {\n            username: 'james.bond',\n            name: 'James Bond',\n            email: 'james.bond.xx@xxx.xxx',\n            image:\n              {{ uri: 'https://cdn1.iconfinder.com/data/icons/avatar-2-2/512/Casual_Man_2-512.png' }},\n            joined: 'Joined at Jun 21, 2021',\n            badgeText: '100',\n            badgeColor: '#fff',\n            badgeBackground: '#303030',\n            circle: ['transparent', 'transparent'],\n          },\n          {\n            username: 'sherlock.holmes',\n            name: 'Sherlock Holmes',\n            email: 'sherlock.holmes.xx@xxx.xxx',\n            badgeText: '100',\n            badgeColor: '#fff',\n            badgeBackground: '#303030',\n            circle: ['#fff000', 'transparent', '#00ffd0'],\n          },\n          {\n            name: 'Shinichi Kudo',\n            email: 'shinichi.kudo.xx@xxx.xxx',\n            image:\n              {{ uri: 'https://cdn1.iconfinder.com/data/icons/avatar-2-2/512/Casual_Man_3-512.png' }},\n            badgeText: '21',\n            badgeColor: '#fff',\n            badgeBackground: '#25dbd2',\n            joined: 'Joined at Jun 31, 2021',\n            circle: ['transparent', 'transparent'],\n          },\n          {\n            name: 'Arthur Conan Doyle',\n            email: 'arthur.conan.doyle.xx@xxx.xxx',\n            image:\n              {{ uri: 'https://cdn0.iconfinder.com/data/icons/user-interface-vol-3-12/66/68-512.png' }},\n            circle: ['transparent', 'transparent'],\n          },\n        ]}\n        badgeFunction={e =\u003e {\n          return e \u003e 99 ? '99+' : e;\n        }}\n        menu={[\n          {\n            type: 'menu',\n            name: 'opt0',\n            title: 'Le mie app e i miei giochi',\n            icon: 'apps',\n            colorText: '#000',\n            colorTextFocus: '#4CAF50',\n            colorIcon: '#c1c1c1',\n            colorIconFocus: '#4CAF50',\n            background: 'transparent',\n            backgroundFocus: '#e8e8e8',\n            badgeText: '100',\n            badgeColor: '#fff',\n            badgeBackground: '#1194ff',\n          },\n          {\n            type: 'menu',\n            name: 'opt1',\n            title: 'Le mie notifiche',\n            icon: 'add-alert',\n            colorText: '#000',\n            colorTextFocus: '#607D8B',\n            colorIcon: '#c1c1c1',\n            colorIconFocus: '#607D8B',\n            background: 'transparent',\n            backgroundFocus: '#e8e8e8',\n            badgeText: '31+',\n          },\n          {\n            type: 'menu',\n            name: 'opt2',\n            title: 'Abbonamenti',\n            icon: 'refresh',\n            colorText: '#000',\n            colorTextFocus: '#607D8B',\n            colorIcon: '#c1c1c1',\n            colorIconFocus: '#607D8B',\n            background: 'transparent',\n            backgroundFocus: '#e8e8e8',\n          },\n          { type: 'divider' },\n          {\n            type: 'title',\n            title: 'App Google',\n            colorText: '#000',\n          },\n          {\n            type: 'menu',\n            name: 'opt3',\n            title: 'Home page',\n            icon: 'home',\n            colorText: '#000',\n            colorTextFocus: '#4CAF50',\n            colorIcon: '#4CAF50',\n            colorIconFocus: '#4CAF50',\n            background: 'transparent',\n            backgroundFocus: '#e8e8e8',\n          },\n          {\n            type: 'collapse',\n            name: 'opt4',\n            title: 'Film',\n            iconCollapsingName: 'local-movies',\n            iconColor: \"#ccc\",\n            colorText: '#000',\n            colorTextFocus: '#4CAF50',\n            colorIcon: '#f44336',\n            colorIconFocus: '#f44336',\n            background: 'transparent',\n            backgroundFocus: '#e8e8e8',\n            menu: [\n              {\n                name: 'sub0',\n                title: \"Apri l'app Film\",\n                icon: 'film',\n                colorText: '#000',\n                colorTextFocus: '#f44336',\n                colorIcon: '#f44336',\n                colorIconFocus: '#f44336',\n                background: 'transparent',\n                backgroundFocus: '#e8e8e8',\n              },\n            ],\n          },\n          {\n            type: 'collapse',\n            name: 'opt4',\n            title: 'Libri',\n            showOnStart: true,\n            rippleColor:\"#000\",\n            backgroundBarNormal: \"#545a63\",\n            backgroundBarFocus: \"#22252A\",\n            iconBarNameNormal: 'book',\n            iconBarNameFocus: 'book',\n            iconBarColorNormal: \"#1194ff\",\n            iconBarColorFocus: \"#ffb600\",\n            textBarColorNormal: \"#1194ff\",\n            textBarColorFocus: \"#ffb600\",\n            animateIconColorNormal:\"#1194ff\",\n            animateIconColorFocus:\"#ffb600\",\n            iconColor: \"#ccc\",\n            colorText: '#000',\n            colorTextFocus: '#4CAF50',\n            colorIcon: '#f44336',\n            colorIconFocus: '#f44336',\n            background: 'transparent',\n            badgeText: \"100\",\n            badgeColor: \"#fff\",\n            badgeBackground: \"#1194ff\",\n            badgeRadius: 4,\n            badgeStyle: {},\n            menu: [\n              {\n                name: 'sub1',\n                title: \"Apri l'app Libri\",\n                icon: 'book',\n                colorText: '#000',\n                colorTextFocus: '#2196F3',\n                colorIcon: '#2196F3',\n                colorIconFocus: '#2196F3',\n                background: 'transparent',\n                backgroundFocus: '#e8e8e8',\n                badgeText: '100',\n                badgeColor: '#fff',\n                badgeBackground: '#1194ff',\n                badgeRadius: 4,\n                close: true\n              },\n            ],\n          },\n          { type: 'divider' },\n          {\n            type: 'menu',\n            name: 'opt9',\n            title: 'Account',\n            icon: 'person-pin',\n            colorText: '#000',\n            colorTextFocus: '#607D8B',\n            colorIcon: '#c1c1c1',\n            colorIconFocus: '#607D8B',\n            background: 'transparent',\n            backgroundFocus: '#e8e8e8',\n          },\n          {\n            type: 'menu',\n            name: 'opt10',\n            title: 'Utilizza codice',\n            icon: 'code',\n            colorText: '#000',\n            colorTextFocus: '#607D8B',\n            colorIcon: '#c1c1c1',\n            colorIconFocus: '#607D8B',\n            background: 'transparent',\n            backgroundFocus: '#e8e8e8',\n          },\n          {\n            type: 'menu',\n            name: 'opt11',\n            title: 'Lista desideri',\n            icon: 'check-circle',\n            colorText: '#000',\n            colorTextFocus: '#607D8B',\n            colorIcon: '#c1c1c1',\n            colorIconFocus: '#607D8B',\n            background: 'transparent',\n            backgroundFocus: '#e8e8e8',\n          },\n          {\n            type: 'menu',\n            name: 'opt12',\n            title: 'Play Protect',\n            icon: 'verified-user',\n            colorText: '#000',\n            colorTextFocus: '#607D8B',\n            colorIcon: '#c1c1c1',\n            colorIconFocus: '#607D8B',\n            background: 'transparent',\n            backgroundFocus: '#e8e8e8',\n          },\n          {\n            type: 'menu',\n            name: 'opt13',\n            title: 'Impostazioni',\n            icon: 'settings',\n            colorText: '#000',\n            colorTextFocus: '#607D8B',\n            colorIcon: '#c1c1c1',\n            colorIconFocus: '#607D8B',\n            background: 'transparent',\n            backgroundFocus: '#e8e8e8',\n          },\n          {\n            type: 'menu',\n            name: 'opt14',\n            title: 'Close Drawer',\n            icon: 'exit-to-app',\n            colorText: '#000',\n            colorTextFocus: '#607D8B',\n            colorIcon: '#c1c1c1',\n            colorIconFocus: '#607D8B',\n            background: 'transparent',\n            backgroundFocus: '#e8e8e8',\n            close: true\n          },\n        ]}\n        changeAccount={e =\u003e {\n          console.log('Account:', e);\n        }}\n        onPress={e =\u003e {\n          this.setState({ menu: e.title });\n          var type = e.name == 'opt2' ? 'simple' : '';\n          this.setState({ type });\n          alert(\"Title:\"+e.title+\" - \"+\"Name:\"+e.name);\n          console.log('Menu:', e);\n        }}\u003e\n        \u003cView\n          style={{\n            flex: 1,\n            //alignItems: 'flex-end',\n          }}\u003e\n          \u003cText style={{ marginTop: 25, marginRight: 5 }}\u003eHello World!\u003c/Text\u003e\n          \u003cText style={{ marginTop: 25, marginRight: 5 }}\u003e\n            {this.state.menu}!\n          \u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/NavigationDrawerLayout\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({});\n```\n\n## 💡 Props\n\n|Prop|Type|Default|Note|\n| - | - | - | - |\n|`percent`| `number`|| Length in percentage of the drawer.\n|`statusBar`| `string`|| Color statusbar.\n|`statusBarTransparency`| `number`|| Transparency statusbar.\n|`type`| `string`|| `simple`\n|`drawerPosition`| `string`|`left`| Position drawer.\n|`selected`| `string`|| \n|`window`| `string`|`menu`| It is used to define what to display in the drawer, types: `menu` or `account`\n|`color`| `string`|| \n|`backgroundColor`| `string`|| Background drawer.\n|`imageBackground`| `obj`|| Image drawer.\n|`first`| `string`|| It is used to define what to set as the first field.\n|`second`| `string`|| It is used to define what to set as the second field.\n|`account`| `array`|| It is used to define account.\n|`menu`| `array`|| It is used to define the menu.\n|`badgeFunction`| `function: optional`|| Use in case you want to define a function, for the badgeText attribute.\n|`changeAccount`| `function: optional`|| When you change the primary user of this function returns the its information.\n\n- **Account**\n\n|Prop|Type|Default|Note|\n| - | - | - | - |\n|`name`|`string`|| \n|`email`|`string`|| \n|`image`|`obj`|| `We need to pass an url image, as in the example, or a required local image.`\n|`badgeText`|`string`|| \n|`badgeColor`|`string`|| \n|`badgeBackground`|`string`|| \n\nYou can add any attribute, then using the `first` and` second` attributes you can use to show them in the drawer.\n\n- **Menu type `divider`**\n\n|Prop|Type|Default|Note|\n| - | - | - | - |\n|`type`|`string`|| Use `divider`.\n|`color`|`string`|`#cccccc`| Color divider.\n|`width`|`number`|`1`| Width divider.\n|`style`|`style: optional`|| Style divider.\n\n- **Menu type `menu`**\n\n|Prop|Type|Default|Note|\n| - | - | - | - |\n|`type`|`string`|| `menu`\n|`name`|`string`|| \n|`title`|`string`|| \n|`icon`|`string`|| \n|`colorText`|`string`|| \n|`colorTextFocus`|`string`|| \n|`colorIcon`|`string`|| \n|`colorIconFocus`|`string`|| \n|`background`|`string`|| \n|`backgroundFocus`|`string`|| \n|`badgeText`|`string`|| \n|`badgeColor`|`string`|| \n|`badgeBackground`|`string`||\n|`close`|`boolean`|`false`| When it is set to `true`, if the item is clicked the drawer menu will close.\n\n- **Menu type `collapse`**\n\n|Prop|Type|Default|Note|\n| - | - | - | - |\n|`type`|`string`|| `collapse`\n|`name`|`string`|| \n|`title`|`string`|| \n|`showOnStart`|`bool`|| \n|`rippleColor`|`string`|| \n|`backgroundBarNormal`|`string`|| \n|`backgroundBarFocus`|`string`|| \n|`iconBarNameNormal`|`string`|| \n|`iconBarNameFocus`|`string`|| \n|`iconBarColorNormal`|`string`|| \n|`iconBarColorFocus`|`string`|| \n|`textBarColorNormal`|`string`|| \n|`textBarColorFocus`|`string`|| \n|`animateIconColorNormal`|`string`|| \n|`animateIconColorFocus`|`string`|| \n|`iconColor`|`string`|| \n|`colorText`|`string`|| \n|`colorTextFocus`|`string`|| \n|`colorIcon`|`string`|| \n|`colorIconFocus`|`string`|| \n|`background`|`string`|| \n|`badgeText`|`string`|| \n|`badgeColor`|`string`|| \n|`badgeBackground`|`string`|| \n|`badgeRadius`|`number`|| \n|`badgeStyle`|`string`|| \n|`menu`|`array`|| \n\n## 📜 License\nThis library is provided under the Apache License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaetanozappi%2Freact-native-navigation-drawer-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaetanozappi%2Freact-native-navigation-drawer-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaetanozappi%2Freact-native-navigation-drawer-layout/lists"}