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

``sh
yarn add react-native-reanimated-material-menu
`

or using npm

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

You should also install react-native-reanimated library:

`sh
yarn add react-native-reanimated
`
For iOS, go to ios folder and run pod install:
`sh
cd ios
pod install
`

Usage example (expo demo)

`jsx
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 (

ref={this.setMenuRef}
button={Show menu}
>
Menu item 1
Menu item 2

Menu item 3


Menu item 4


);
}
}

export default App;
`

Menu

$3

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

$3

| name | description |
| :----- | :---------- |
| show() | Shows menu |
| hide() | Hides menu |

MenuItem

$3

| 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] component (like text itself, strings, [react-native-vector-icons] or [expo icons]) otherwise you may get an error on a real device.

MenuDivider

$3

| 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

[text component]: https://facebook.github.io/react-native/docs/text.html
[react-native-vector-icons]: https://github.com/oblador/react-native-vector-icons
[expo icons]: https://docs.expo.io/versions/latest/guides/icons/