react-native-material-menu ·
Pure JavaScript material menu component for React Native.
Install
npm install --save react-native-material-menu
or
yarn add react-native-material-menu
expo demo)
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 children (required) | Node | - |
disabled | Disabled flag | Bool | false |
disabledTextColor | Disabled text color | String | '#bdbdbd' |
ellipsizeMode | Custom ellipsizeMode | String | iOS: 'clip' , Android: 'tail' |
onPress | Called function on press | Func | - |
style | Container style | Style | - |
textStyle | Text style | Style | - |
underlayColor | Pressed color | String | '#e0e0e0' |
Children must be based on
<Text>
component (like text itself, strings, react-native-vector-icons or expo icons) otherwise you may get an error on a real device.
MenuDivider
Properties
name | description | type | default |
---|---|---|---|
color | Line color | String | 'rgba(0,0,0,0.12)' |
License
MIT License. © Maksim Milyutin 2017-2019