🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A React Native component to create Material Design inspired popup menus on your app.

Navigation_Menu React Native

Documentation

react-native-material-menu · npm license

Pure JavaScript material menu component for React Native.

Install

npm install --save react-native-material-menu

or

yarn add react-native-material-menu

Usage example (expo demo)

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


You May Also Like