react-native-material-menu
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-native-material-menu package

    1.2.0 • Public • Published

    react-native-material-menu · npm license

    Pure JavaScript material menu component for React Native with automatic RTL support.

    Install

    Using yarn

    yarn add react-native-material-menu

    or using npm

    npm install --save 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 -
    animationDuration Changes show() and hide() duration Number 300

    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)'

    Pietile native kit

    Also take a look at other our components for react-native - pietile-native-kit

    License

    MIT License. © Maksim Milyutin 2017-2019

    Install

    npm i react-native-material-menu

    DownloadsWeekly Downloads

    6,728

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    2.17 MB

    Total Files

    190

    Last publish

    Collaborators

    • avatar