react-native-reanimated-material-menu ·

Material menu component for React Native using Reanimated Library for 60FPS animations with automatic RTL support. Forked from react-native-material-menu

Install

Using yarn

yarn add react-native-reanimated-material-menu

or using npm

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

You should also install react-native-reanimated library:

 yarn add react-native-reanimated

For iOS, go to ios folder and run pod install:

  cd ios
  pod install

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