{"id":28990562,"url":"https://github.com/thegreatercurve/react-native-radial-context-menu","last_synced_at":"2025-07-11T15:35:10.928Z","repository":{"id":33191219,"uuid":"154226661","full_name":"thegreatercurve/react-native-radial-context-menu","owner":"thegreatercurve","description":"⚛️ React Native menu component.","archived":false,"fork":false,"pushed_at":"2023-07-02T00:22:42.000Z","size":1051,"stargazers_count":21,"open_issues_count":15,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-25T00:12:27.622Z","etag":null,"topics":["context-menu","context-menu-react","menus","react-native-menu"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-radial-context-menu","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/thegreatercurve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-10-22T22:38:59.000Z","updated_at":"2025-03-11T23:02:18.000Z","dependencies_parsed_at":"2025-06-25T00:12:21.372Z","dependency_job_id":"c8bfac7f-ac1c-4633-a3f2-01f889675528","html_url":"https://github.com/thegreatercurve/react-native-radial-context-menu","commit_stats":null,"previous_names":["thegreatercurve/react-native-radial-menu"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/thegreatercurve/react-native-radial-context-menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegreatercurve%2Freact-native-radial-context-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegreatercurve%2Freact-native-radial-context-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegreatercurve%2Freact-native-radial-context-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegreatercurve%2Freact-native-radial-context-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thegreatercurve","download_url":"https://codeload.github.com/thegreatercurve/react-native-radial-context-menu/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegreatercurve%2Freact-native-radial-context-menu/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264841584,"owners_count":23671900,"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":["context-menu","context-menu-react","menus","react-native-menu"],"created_at":"2025-06-25T00:12:14.020Z","updated_at":"2025-07-11T15:35:10.898Z","avatar_url":"https://github.com/thegreatercurve.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Radial Context Menu\n\nAn easy to use context menu component for React Native, inspired by [The Guardian's radial context menu](https://github.com/guardian/android-radialactionmenu) in their Android app.\n\nA live demo of the component can he found as an Expo Snack [here](https://snack.expo.io/@thegreatercurve/react-native-radial-context-menu-example), or in the `example` folder.\n\n![Demo](./demo.gif)\n\n\n## Installation \n\n```bash\nnpm i --save react-native-radial-context-menu\n```\n\n## Usage \n\nA simple example is shown below.\n\n```js\nimport { withRadialActionMenu } from 'react-native-radial-context-menu'\n\n// Wrap any component with the provided Higher Order Component.\nconst ListItemWithMenu = withRadialActionMenu(() =\u003e \u003cView /\u003e)\n\n// Instantiate the wrapped component, passing in the buttons as props.\nconst App = () =\u003e (\n    \u003cListItemWithMenu\n      buttons={[\n        { component: () =\u003e \u003cText\u003e1\u003c/Text\u003e, value: 1 },\n        { component: () =\u003e \u003cText\u003e2\u003c/Text\u003e, value: 2 },\n        { component: () =\u003e \u003cText\u003e3\u003c/Text\u003e, value: 3 },\n        { component: () =\u003e \u003cText\u003e4\u003c/Text\u003e, value: 4 },\n      ]}\n    /\u003e\n)\n```\nFor something more complex, have a look at the [Expo Snack](https://snack.expo.io/@thegreatercurve/react-native-radial-context-menu-example) demo.\n\n### Props\n\n| Prop              | Type       | Required | Default   | Description                                                                                     |\n| ----------------- | ---------- | -------- | --------- | ----------------------------------------------------------------------------------------------- |\n| `backgroundColor` | _String_   | Optional | `#fa8072` | Background color for both the menu and buttons.                                                 |\n| `buttons`         | _Array_    | Required | `[]`      | Array of button objects. Each button requires a `component` and `value`.                        |\n| `buttonDiameter`  | _Number_   | Optional | `60`      | Width of each button.                                                                           |\n| `menuDiameter`    | _Number_   | Optional | `90`      | Width of the menu at the touch origin.                                                          |\n| `onClose`         | _Function_ | Optional | `void`    | Callback fired when the menu is closed, with either the `value` of the chosen button or `null`. |\n| `onOpen`          | _Function_ | Optional | `void`    | Callback fired when the menu is opened.                                                         |\n| `openDelay`       | _Number_   | Optional | `0`       | Number of milliseconds on press in before the menu opens.                                       |\n| `spreadAngle`     | _Number_   | Optional | `170`     | Angle between the first and last button from the touch origin.                                  |\n| `spreadRadius`    | _Number_   | Optional | `100`     | Distance the buttons move out from the touch origin.                                            |\n| `vibrate`         | _Boolean_  | Optional | `true`    | Vibrate on move over a button.                                                                  |\n| `vibrateDuration` | _Number_   | Optional | `50`      | Number of milliseconds of the vibration.                                                        |\n\n### Contribute\n\nWe warmly welcome any contributions! You can open a Pull Request [here](https://github.com/thegreatercurve/react-native-radial-context-menu/pulls).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegreatercurve%2Freact-native-radial-context-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthegreatercurve%2Freact-native-radial-context-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegreatercurve%2Freact-native-radial-context-menu/lists"}