Material Menu for React Native using Reanimated Library for 60FPS Animations
npm install 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

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
`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={
>
);
}
}
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 | - |
| animationDuration | Changes show() and hide() duration | Number | 300 |
| name | description |
| :----- | :---------- |
| show() | Shows menu |
| hide() | Hides menu |
| name | description | type | default |
| :---------------- | :--------------------------- | -----: | :------------------------------- |
| children | Rendered children (required) | Node | - |
| disabled | Disabled flag | Bool | false |'#bdbdbd'
| disabledTextColor | Disabled text color | String | |'clip'
| ellipsizeMode | Custom ellipsizeMode | String | iOS: , Android: 'tail' |'#e0e0e0'
| onPress | Called function on press | Func | - |
| style | Container style | Style | - |
| textStyle | Text style | Style | - |
| underlayColor | Pressed color | String | |
> 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.
| name | description | type | default |
| :---- | :---------- | -----: | :------------------- |
| color | Line color | String | 'rgba(0,0,0,0.12)'` |
Also take a look at other our components for react-native - pietile-native-kit
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/