react-native-menu-hom
1.0.5 • Public • Published react-native-material-menu ·
Pure JavaScript material
menu component for React
Native.
![](https://camo.githubusercontent.com/820dc0c1da219eebd8a0e3f2710841ff9ccf9b7154e21a4f51ab0bec3c705826/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f336f76396a55765148345538324a474e52432f67697068792e676966)
Install
npm install --save react-native-material-menu
or
yarn add react-native-material-menu
Usage example
import React from 'react';
import { View, Text } from 'react-native';
import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';
class App extends React.PureComponent {
_menu = null;
setMenuRef = ref => {
this._menu = ref;
};
hideMenu = () => {
this._menu.hide();
};
showMenu = () => {
this._menu.show();
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Menu
ref={this.setMenuRef}
button={<Text onPress={this.showMenu}>Show menu</Text>}
>
<MenuItem onPress={this.hideMenu}>Menu item 1</MenuItem>
<MenuItem onPress={this.hideMenu}>Menu item 2</MenuItem>
<MenuItem onPress={this.hideMenu} disabled>
Menu item 3
</MenuItem>
<MenuDivider />
<MenuItem onPress={this.hideMenu}>Menu item 4</MenuItem>
</Menu>
</View>
);
}
}
export default App;
Menu
Properties
name |
description |
type |
default |
children |
Components rendered in menu (required) |
Node |
- |
button |
Button component (required) |
Node |
- |
style |
Menu style |
Style |
- |
onHidden |
Callback when menu has become hidden |
Function |
- |
Methods
name |
description |
show() |
Shows menu |
hide() |
Hides menu |
MenuItem
Properties
name |
description |
type |
default |
children |
Rendered text (required) |
String |
- |
disabled |
Disabled flag |
Bool |
false |
disabledTextColor |
Disabled text color |
String |
"#BDBDBD" |
onPress |
Called function on press |
Func |
- |
style |
Container style |
Style |
- |
textStyle |
Text style |
Style |
- |
underlayColor |
Pressed color |
String |
"#E0E0E0" |
MenuDivider
Properties
name |
description |
type |
default |
color |
Line color |
String |
"rgba(0,0,0,0.12)" |
License
MIT License. © Maksim Milyutin 2017
Readme
Keywords
nonePackage Sidebar
Install
npm i react-native-menu-hom
Weekly Downloads