Skip to content
Pure JavaScript material menu component for React Native
Branch: master
Clone or download
Latest commit a09a16f Jul 21, 2019
Permalink
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
README.md Add strings Jun 14, 2019
package.json v0.6.6 Jul 21, 2019
yarn.lock Update deps. Regenerate yarn.lock. Jul 18, 2019

README.md

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 can’t perform that action at this time.