# react-native-material-menu

> Material Menu for React Native

Latest version **2.0.0** (published 2021-08-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-material-menu
pnpm add react-native-material-menu
yarn add react-native-material-menu
bun add react-native-material-menu
```

## Health

**Score 18/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-08-23 |
| First published | 2017-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-native-material-menu) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 515 |
| Author | Maksim Milyutin |
| Maintainers | mxck |
| Keywords | react-native, react, menu, material-menu, react-component, material, dropdown |

## Links

- npm: https://www.npmjs.com/package/react-native-material-menu
- Repository: https://github.com/mxck/react-native-material-menu
- Issues: https://github.com/mxck/react-native-material-menu/issues
- npm.io page: https://npm.io/package/react-native-material-menu

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2021-08-23
- 2.0.0-beta.2 (beta) — 2021-08-23
- 2.0.0-beta.1 — 2021-08-19
- 1.2.0 — 2020-12-06
- 1.1.3 — 2020-04-02
- 1.1.2 — 2020-04-02
- 1.1.1 — 2020-04-02
- 1.1.0 — 2020-03-29
- 1.0.0 — 2019-08-23
- 0.6.7 — 2019-08-20
- 0.6.6 — 2019-07-21
- 0.6.5 — 2019-07-20
- 0.6.4 — 2019-07-18
- 0.6.3 — 2019-06-26
- 0.6.2 — 2019-06-13
- … 35 more at https://npm.io/package/react-native-material-menu/versions

## README

# react-native-material-menu · [![npm](https://img.shields.io/npm/v/react-native-material-menu.svg)](https://www.npmjs.com/package/react-native-material-menu) [![license](https://img.shields.io/npm/l/react-native-material-menu.svg)](https://github.com/mxck/react-native-material-menu/blob/master/LICENSE)

Pure JavaScript [material
menu](https://material.io/guidelines/components/menus.html) component for React
Native with automatic RTL support.

<img src="https://media.giphy.com/media/3ov9jUvQH4U82JGNRC/giphy.gif" />

## Install

Using yarn

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

or using npm

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

## Usage example ([expo demo](https://snack.expo.io/@mxck/react-native-material-menu-demo))

```jsx
import React from 'react';
import React, { useState } from 'react';

import { View, Text } from 'react-native';
import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';

export default function App() {
  const [visible, setVisible] = useState(false);

  const hideMenu = () => setVisible(false);

  const showMenu = () => setVisible(true);

  return (
    <View style={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>
      <Menu
        visible={visible}
        anchor={<Text onPress={showMenu}>Show menu</Text>}
        onRequestClose={hideMenu}
      >
        <MenuItem onPress={hideMenu}>Menu item 1</MenuItem>
        <MenuItem onPress={hideMenu}>Menu item 2</MenuItem>
        <MenuItem disabled>Disabled item</MenuItem>
        <MenuDivider />
        <MenuItem onPress={hideMenu}>Menu item 4</MenuItem>
      </Menu>
    </View>
  );
}
```

## Menu

| name              | description                            |      type | default |
| :---------------- | :------------------------------------- | --------: | :------ |
| children          | Components rendered in menu (required) | ReactNode | -       |
| anchor            | Button component (required)            | ReactNode | -       |
| visible           | Whether the Menu is currently visible  |   Boolean | -       |
| style             | Menu style                             |     Style | -       |
| onRequestClose    | Callback when menu has become hidden   |  Function | -       |
| animationDuration | Changes show() and hide() duration     |    Number | 300     |

## MenuItem

| name              | description                  |      type | default     |
| :---------------- | :--------------------------- | --------: | :---------- |
| children          | Rendered children (required) | ReactNode | -           |
| disabled          | Disabled flag                |   Boolean | `false`     |
| disabledTextColor | Disabled text color          |    String | `'#bdbdbd'` |
| onPress           | Called function on press     |      Func | -           |
| style             | Container style              |     Style | -           |
| textStyle         | Text style                   |     Style | -           |
| pressColor        | Pressed color                |    String | `'#e0e0e0'` |

> **Children** must be based on [`<Text>`][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

| 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](https://github.com/pietile/pietile-native-kit)

## License

MIT License. © Maksim Milyutin 2017-2021

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

---
_Source: https://npm.io/package/react-native-material-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._