Skip to content
Pure JavaScript material menu component for React Native
Branch: master
Clone or download
Latest commit a09a16f Jul 21, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Call private method (Fix #70) Jul 21, 2019
.eslintrc.js Cleanup after eslint upgrate Jul 25, 2018
.gitignore Init Oct 29, 2017
.importsortrc Update deps. Clean up. May 26, 2019
.prettierrc Init Oct 29, 2017
LICENSE Create LICENSE Oct 30, 2017 Add strings Jun 14, 2019
package.json v0.6.6 Jul 21, 2019
yarn.lock Update deps. Regenerate yarn.lock. Jul 18, 2019

react-native-material-menu · npm license

Pure JavaScript material menu component for React Native.


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


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 = () => {

  showMenu = () => {;

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          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
          <MenuDivider />
          <MenuItem onPress={this.hideMenu}>Menu item 4</MenuItem>

export default App;



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 -


name description
show() Shows menu
hide() Hides menu



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.



name description type default
color Line color String 'rgba(0,0,0,0.12)'


MIT License. © Maksim Milyutin 2017-2019

You can’t perform that action at this time.