{"id":4121,"url":"https://github.com/mxck/react-native-material-menu","last_synced_at":"2025-10-06T03:26:16.147Z","repository":{"id":26400714,"uuid":"108719907","full_name":"mxck/react-native-material-menu","owner":"mxck","description":"Pure JavaScript material menu component for React Native","archived":false,"fork":false,"pushed_at":"2023-07-18T21:28:02.000Z","size":601,"stargazers_count":522,"open_issues_count":23,"forks_count":92,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-30T01:03:09.275Z","etag":null,"topics":["android","ios","material","material-design","react-native","react-native-component"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mxck.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-10-29T09:09:49.000Z","updated_at":"2024-10-27T08:19:07.000Z","dependencies_parsed_at":"2024-04-25T00:41:24.559Z","dependency_job_id":"1ef4abed-d767-4805-b848-6e1fdc4b3ee3","html_url":"https://github.com/mxck/react-native-material-menu","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mxck%2Freact-native-material-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mxck%2Freact-native-material-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mxck%2Freact-native-material-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mxck%2Freact-native-material-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mxck","download_url":"https://codeload.github.com/mxck/react-native-material-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744334,"owners_count":20988783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","material","material-design","react-native","react-native-component"],"created_at":"2024-01-05T20:17:01.752Z","updated_at":"2025-10-06T03:26:11.121Z","avatar_url":"https://github.com/mxck.png","language":"TypeScript","funding_links":[],"categories":["Components","React Native","Others"],"sub_categories":["UI","Components React Native"],"readme":"# react-native-material-menu \u0026middot; [![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)\n\nPure JavaScript [material\nmenu](https://material.io/guidelines/components/menus.html) component for React\nNative with automatic RTL support.\n\n\u003cimg src=\"https://media.giphy.com/media/3ov9jUvQH4U82JGNRC/giphy.gif\" /\u003e\n\n## Install\n\nUsing yarn\n\n```sh\nyarn add react-native-material-menu\n```\n\nor using npm\n\n```sh\nnpm install --save react-native-material-menu\n```\n\n## Usage example\n\n```jsx\nimport React, { useState } from 'react';\n\nimport { View, Text } from 'react-native';\nimport { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';\n\nexport default function App() {\n  const [visible, setVisible] = useState(false);\n\n  const hideMenu = () =\u003e setVisible(false);\n\n  const showMenu = () =\u003e setVisible(true);\n\n  return (\n    \u003cView style={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}\u003e\n      \u003cMenu\n        visible={visible}\n        anchor={\u003cText onPress={showMenu}\u003eShow menu\u003c/Text\u003e}\n        onRequestClose={hideMenu}\n      \u003e\n        \u003cMenuItem onPress={hideMenu}\u003eMenu item 1\u003c/MenuItem\u003e\n        \u003cMenuItem onPress={hideMenu}\u003eMenu item 2\u003c/MenuItem\u003e\n        \u003cMenuItem disabled\u003eDisabled item\u003c/MenuItem\u003e\n        \u003cMenuDivider /\u003e\n        \u003cMenuItem onPress={hideMenu}\u003eMenu item 4\u003c/MenuItem\u003e\n      \u003c/Menu\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n## Menu\n\n| name              | description                            |      type | default |\n| :---------------- | :------------------------------------- | --------: | :------ |\n| children          | Components rendered in menu (required) | ReactNode | -       |\n| anchor            | Button component (required)            | ReactNode | -       |\n| visible           | Whether the Menu is currently visible  |   Boolean | -       |\n| style             | Menu style                             | ViewStyle | -       |\n| onRequestClose    | Callback when menu has become hidden   |  Function | -       |\n| animationDuration | Changes show/hide animation duration   |    Number | 300     |\n\n## MenuItem\n\n| name              | description                  |      type | default     |\n| :---------------- | :--------------------------- | --------: | :---------- |\n| children          | Rendered children (required) | ReactNode | -           |\n| disabled          | Disabled flag                |   Boolean | `false`     |\n| disabledTextColor | Disabled text color          |    String | `'#bdbdbd'` |\n| onPress           | Called function on press     |  Function | -           |\n| style             | Container style              | ViewStyle | -           |\n| textStyle         | Text style                   | TextStyle | -           |\n| pressColor        | Pressed color                |    String | `'#e0e0e0'` |\n\n\u003e **Children** must be based on [`\u003cText\u003e`][text component] component (like **text** itself, strings, [react-native-vector-icons] or [expo icons]) otherwise you may get an error on a real device.\n\n## MenuDivider\n\n| name  | description |   type | default              |\n| :---- | :---------- | -----: | :------------------- |\n| color | Line color  | String | `'rgba(0,0,0,0.12)'` |\n\n## Pietile native kit\n\nAlso take a look at other our components for react-native - [pietile-native-kit](https://github.com/pietile/pietile-native-kit)\n\n## License\n\nMIT License. © Maksim Milyutin 2017-2021\n\n[text component]: https://facebook.github.io/react-native/docs/text.html\n[react-native-vector-icons]: https://github.com/oblador/react-native-vector-icons\n[expo icons]: https://docs.expo.io/versions/latest/guides/icons/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmxck%2Freact-native-material-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmxck%2Freact-native-material-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmxck%2Freact-native-material-menu/lists"}