https://github.com/gaetanozappi/react-native-navigation-drawer-layout
React Native library to generate navigation drawer layout.
https://github.com/gaetanozappi/react-native-navigation-drawer-layout
drawer drawer-android drawer-layout drawer-menu drawer-navigation drawerlayout drawernavigator navigation navigation-drawer-layout react-native
Last synced: 7 months ago
JSON representation
React Native library to generate navigation drawer layout.
- Host: GitHub
- URL: https://github.com/gaetanozappi/react-native-navigation-drawer-layout
- Owner: gaetanozappi
- License: apache-2.0
- Created: 2018-08-30T22:03:41.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-07-10T12:46:00.000Z (almost 7 years ago)
- Last Synced: 2025-01-17T13:49:36.409Z (over 1 year ago)
- Topics: drawer, drawer-android, drawer-layout, drawer-menu, drawer-navigation, drawerlayout, drawernavigator, navigation, navigation-drawer-layout, react-native
- Language: JavaScript
- Homepage:
- Size: 442 KB
- Stars: 27
- Watchers: 2
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native: react-native-navigation-drawer-layout
[](https://github.com/gaetanozappi/react-native-navigation-drawer-layout)
[](https://www.npmjs.com/package/react-native-navigation-drawer-layout)
[](https://github.com/gaetanozappi/react-native-navigation-drawer-layout)
[](https://www.npmjs.com/package/react-native-navigation-drawer-layout)
[](https://github.com/gaetanozappi/react-native-navigation-drawer-layout/issues)
[](https://github.com/gaetanozappi/react-native-navigation-drawer-layout/issues?q=is%3Aissue+is%3Aclosed)
[](http://github.com/gaetanozappi/react-native-navigation-drawer-layout/issues)
[]()
- [Usage](#-usage)
- [License](#-license)
## 📖 Getting started
`$ npm install react-native-navigation-drawer-layout --save`
`$ react-native link react-native-material-letter-icon`
`$ react-native link react-native-vector-icons`
## 💻 Usage
```javascript
import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import NavigationDrawerLayout from 'react-native-navigation-drawer-layout';
export default class App extends React.Component {
constructor() {
super();
this.state = {
menu: '',
type: ''
};
}
render() {
return (
{
return e > 99 ? '99+' : e;
}}
menu={[
{
type: 'menu',
name: 'opt0',
title: 'Le mie app e i miei giochi',
icon: 'apps',
colorText: '#000',
colorTextFocus: '#4CAF50',
colorIcon: '#c1c1c1',
colorIconFocus: '#4CAF50',
background: 'transparent',
backgroundFocus: '#e8e8e8',
badgeText: '100',
badgeColor: '#fff',
badgeBackground: '#1194ff',
},
{
type: 'menu',
name: 'opt1',
title: 'Le mie notifiche',
icon: 'add-alert',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
badgeText: '31+',
},
{
type: 'menu',
name: 'opt2',
title: 'Abbonamenti',
icon: 'refresh',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{ type: 'divider' },
{
type: 'title',
title: 'App Google',
colorText: '#000',
},
{
type: 'menu',
name: 'opt3',
title: 'Home page',
icon: 'home',
colorText: '#000',
colorTextFocus: '#4CAF50',
colorIcon: '#4CAF50',
colorIconFocus: '#4CAF50',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{
type: 'collapse',
name: 'opt4',
title: 'Film',
iconCollapsingName: 'local-movies',
iconColor: "#ccc",
colorText: '#000',
colorTextFocus: '#4CAF50',
colorIcon: '#f44336',
colorIconFocus: '#f44336',
background: 'transparent',
backgroundFocus: '#e8e8e8',
menu: [
{
name: 'sub0',
title: "Apri l'app Film",
icon: 'film',
colorText: '#000',
colorTextFocus: '#f44336',
colorIcon: '#f44336',
colorIconFocus: '#f44336',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
],
},
{
type: 'collapse',
name: 'opt4',
title: 'Libri',
showOnStart: true,
rippleColor:"#000",
backgroundBarNormal: "#545a63",
backgroundBarFocus: "#22252A",
iconBarNameNormal: 'book',
iconBarNameFocus: 'book',
iconBarColorNormal: "#1194ff",
iconBarColorFocus: "#ffb600",
textBarColorNormal: "#1194ff",
textBarColorFocus: "#ffb600",
animateIconColorNormal:"#1194ff",
animateIconColorFocus:"#ffb600",
iconColor: "#ccc",
colorText: '#000',
colorTextFocus: '#4CAF50',
colorIcon: '#f44336',
colorIconFocus: '#f44336',
background: 'transparent',
badgeText: "100",
badgeColor: "#fff",
badgeBackground: "#1194ff",
badgeRadius: 4,
badgeStyle: {},
menu: [
{
name: 'sub1',
title: "Apri l'app Libri",
icon: 'book',
colorText: '#000',
colorTextFocus: '#2196F3',
colorIcon: '#2196F3',
colorIconFocus: '#2196F3',
background: 'transparent',
backgroundFocus: '#e8e8e8',
badgeText: '100',
badgeColor: '#fff',
badgeBackground: '#1194ff',
badgeRadius: 4,
close: true
},
],
},
{ type: 'divider' },
{
type: 'menu',
name: 'opt9',
title: 'Account',
icon: 'person-pin',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{
type: 'menu',
name: 'opt10',
title: 'Utilizza codice',
icon: 'code',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{
type: 'menu',
name: 'opt11',
title: 'Lista desideri',
icon: 'check-circle',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{
type: 'menu',
name: 'opt12',
title: 'Play Protect',
icon: 'verified-user',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{
type: 'menu',
name: 'opt13',
title: 'Impostazioni',
icon: 'settings',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{
type: 'menu',
name: 'opt14',
title: 'Close Drawer',
icon: 'exit-to-app',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
close: true
},
]}
changeAccount={e => {
console.log('Account:', e);
}}
onPress={e => {
this.setState({ menu: e.title });
var type = e.name == 'opt2' ? 'simple' : '';
this.setState({ type });
alert("Title:"+e.title+" - "+"Name:"+e.name);
console.log('Menu:', e);
}}>
Hello World!
{this.state.menu}!
);
}
}
const styles = StyleSheet.create({});
```
## 💡 Props
|Prop|Type|Default|Note|
| - | - | - | - |
|`percent`| `number`|| Length in percentage of the drawer.
|`statusBar`| `string`|| Color statusbar.
|`statusBarTransparency`| `number`|| Transparency statusbar.
|`type`| `string`|| `simple`
|`drawerPosition`| `string`|`left`| Position drawer.
|`selected`| `string`||
|`window`| `string`|`menu`| It is used to define what to display in the drawer, types: `menu` or `account`
|`color`| `string`||
|`backgroundColor`| `string`|| Background drawer.
|`imageBackground`| `obj`|| Image drawer.
|`first`| `string`|| It is used to define what to set as the first field.
|`second`| `string`|| It is used to define what to set as the second field.
|`account`| `array`|| It is used to define account.
|`menu`| `array`|| It is used to define the menu.
|`badgeFunction`| `function: optional`|| Use in case you want to define a function, for the badgeText attribute.
|`changeAccount`| `function: optional`|| When you change the primary user of this function returns the its information.
- **Account**
|Prop|Type|Default|Note|
| - | - | - | - |
|`name`|`string`||
|`email`|`string`||
|`image`|`obj`|| `We need to pass an url image, as in the example, or a required local image.`
|`badgeText`|`string`||
|`badgeColor`|`string`||
|`badgeBackground`|`string`||
You can add any attribute, then using the `first` and` second` attributes you can use to show them in the drawer.
- **Menu type `divider`**
|Prop|Type|Default|Note|
| - | - | - | - |
|`type`|`string`|| Use `divider`.
|`color`|`string`|`#cccccc`| Color divider.
|`width`|`number`|`1`| Width divider.
|`style`|`style: optional`|| Style divider.
- **Menu type `menu`**
|Prop|Type|Default|Note|
| - | - | - | - |
|`type`|`string`|| `menu`
|`name`|`string`||
|`title`|`string`||
|`icon`|`string`||
|`colorText`|`string`||
|`colorTextFocus`|`string`||
|`colorIcon`|`string`||
|`colorIconFocus`|`string`||
|`background`|`string`||
|`backgroundFocus`|`string`||
|`badgeText`|`string`||
|`badgeColor`|`string`||
|`badgeBackground`|`string`||
|`close`|`boolean`|`false`| When it is set to `true`, if the item is clicked the drawer menu will close.
- **Menu type `collapse`**
|Prop|Type|Default|Note|
| - | - | - | - |
|`type`|`string`|| `collapse`
|`name`|`string`||
|`title`|`string`||
|`showOnStart`|`bool`||
|`rippleColor`|`string`||
|`backgroundBarNormal`|`string`||
|`backgroundBarFocus`|`string`||
|`iconBarNameNormal`|`string`||
|`iconBarNameFocus`|`string`||
|`iconBarColorNormal`|`string`||
|`iconBarColorFocus`|`string`||
|`textBarColorNormal`|`string`||
|`textBarColorFocus`|`string`||
|`animateIconColorNormal`|`string`||
|`animateIconColorFocus`|`string`||
|`iconColor`|`string`||
|`colorText`|`string`||
|`colorTextFocus`|`string`||
|`colorIcon`|`string`||
|`colorIconFocus`|`string`||
|`background`|`string`||
|`badgeText`|`string`||
|`badgeColor`|`string`||
|`badgeBackground`|`string`||
|`badgeRadius`|`number`||
|`badgeStyle`|`string`||
|`menu`|`array`||
## 📜 License
This library is provided under the Apache License.