{"id":13473302,"url":"https://github.com/react-native-menu/menu","last_synced_at":"2025-03-26T17:32:33.458Z","repository":{"id":36972141,"uuid":"309709426","full_name":"react-native-menu/menu","owner":"react-native-menu","description":"UIMenu Component for React Native","archived":false,"fork":false,"pushed_at":"2024-10-30T00:18:03.000Z","size":4012,"stargazers_count":982,"open_issues_count":37,"forks_count":58,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-30T02:48:37.060Z","etag":null,"topics":["hacktoberfest","ios","react-native","uiaction","uimenu"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","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/react-native-menu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-03T14:20:50.000Z","updated_at":"2024-10-30T00:16:58.000Z","dependencies_parsed_at":"2024-04-14T02:59:05.016Z","dependency_job_id":"f40481d0-465c-45e2-bff2-e4e82eaf40d1","html_url":"https://github.com/react-native-menu/menu","commit_stats":{"total_commits":169,"total_committers":13,"mean_commits":13.0,"dds":0.6213017751479291,"last_synced_commit":"394a37c22c51f01d43c47f677f171b8ef6997ba4"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-menu%2Fmenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-menu%2Fmenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-menu%2Fmenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-menu%2Fmenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-native-menu","download_url":"https://codeload.github.com/react-native-menu/menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245702590,"owners_count":20658642,"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":["hacktoberfest","ios","react-native","uiaction","uimenu"],"created_at":"2024-07-31T16:01:02.502Z","updated_at":"2025-03-26T17:32:33.453Z","avatar_url":"https://github.com/react-native-menu.png","language":"Kotlin","funding_links":[],"categories":["Kotlin"],"sub_categories":[],"readme":"# @react-native-menu/menu\n\n![Supports Android, iOS][support-badge]![Github Action Badge][gha-badge] ![npm][npm-badge]\n\nAndroid PopupMenu and iOS14+ UIMenu components for react-native.\nFalls back to ActionSheet for versions below iOS14.\n\n| Android                                                                                                                        | iOS 14+                                                                                                                        | iOS 13                                                                                                                        |\n|--------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------|\n| \u003cimg src=\"https://user-images.githubusercontent.com/6936373/112418277-827ac380-8d6c-11eb-96e2-324487ff3dde.png\" width=\"320\" /\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/6936373/112418272-80b10000-8d6c-11eb-9edb-f91eeff0877e.png\" width=\"320\" /\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/6936373/98471162-cb9f0080-222d-11eb-89ef-9342a1f10893.png\" width=\"320\" /\u003e |\n\n## Installation\n\nvia npm:\n\n```sh\nnpm install @react-native-menu/menu\n```\n\nvia yarn:\n\n```sh\nyarn add @react-native-menu/menu\n```\n\n### Installing on iOS with React Native 0.63 and above\n\nThere is an issue(https://github.com/facebook/react-native/issues/29246) causing projects with this module to fail on build on React Native 0.63 and above.\nThis issue may be fixed in future versions of react native.\nAs a work around, look for lines in `[YourPrject].xcodeproj` under `LIBRARY_SEARCH_PATHS` with `\"\\\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\\\"\",` and change `swift-5.0` to `swift-5.3`.\n\n## Linking\n\nThe package is [automatically linked](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) when building the app. All you need to do is:\n\n```sh\nnpx pod-install\n```\n\n## Usage\n\n```jsx\nimport { MenuView, MenuComponentRef } from '@react-native-menu/menu';\n\n// ...\n\nconst App = () =\u003e {\n  const menuRef = useRef\u003cMenuComponentRef\u003e(null);\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cButton\n        title=\"Show Menu with ref (Android only)\"\n        onPress={() =\u003e menuRef.current?.show()}\n      /\u003e\n      \u003cMenuView\n        ref={menuRef}\n        title=\"Menu Title\"\n        onPressAction={({ nativeEvent }) =\u003e {\n          console.warn(JSON.stringify(nativeEvent));\n        }}\n        actions={[\n          {\n            id: 'add',\n            title: 'Add',\n            titleColor: '#2367A2',\n            image: Platform.select({\n              ios: 'plus',\n              android: 'ic_menu_add',\n            }),\n            imageColor: '#2367A2',\n            subactions: [\n              {\n                id: 'nested1',\n                title: 'Nested action',\n                titleColor: 'rgba(250,180,100,0.5)',\n                subtitle: 'State is mixed',\n                image: Platform.select({\n                  ios: 'heart.fill',\n                  android: 'ic_menu_today',\n                }),\n                imageColor: 'rgba(100,200,250,0.3)',\n                state: 'mixed',\n              },\n              {\n                id: 'nestedDestructive',\n                title: 'Destructive Action',\n                attributes: {\n                  destructive: true,\n                },\n                image: Platform.select({\n                  ios: 'trash',\n                  android: 'ic_menu_delete',\n                }),\n              },\n            ],\n          },\n          {\n            id: 'share',\n            title: 'Share Action',\n            titleColor: '#46F289',\n            subtitle: 'Share action on SNS',\n            image: Platform.select({\n              ios: 'square.and.arrow.up',\n              android: 'ic_menu_share',\n            }),\n            imageColor: '#46F289',\n            state: 'on',\n          },\n          {\n            id: 'destructive',\n            title: 'Destructive Action',\n            attributes: {\n              destructive: true,\n            },\n            image: Platform.select({\n              ios: 'trash',\n              android: 'ic_menu_delete',\n            }),\n          },\n        ]}\n        shouldOpenOnLongPress={false}\n      \u003e\n        \u003cView style={styles.button}\u003e\n          \u003cText style={styles.buttonText}\u003eTest\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/MenuView\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n### Declarative usage\n\nIt's also possible to obtain the `action` is a more React-ish, declarative fashion. Refer to the [`react-to-imperative`](https://github.com/vonovak/react-to-imperative?tab=readme-ov-file#why) package, and see an example [here](https://github.com/vonovak/react-navigation-header-buttons/blob/cca6ce6d04d3b106efe7aa62279101db33c7941b/example/src/screens/UsageNativeMenu.tsx#L62).\n\n## Reference\n\n### Props\n\n#### `ref` (Android only)\n\nRef to the menu component.\n\n| Type | Required |\n|------|----------|\n| ref  | No       |\n\n### `title` (iOS only)\n\nThe title of the menu.\n\n| Type   | Required |\n|--------|----------|\n| string | Yes      |\n\n### `isAnchoredToRight` (Android only)\n\nBoolean determining if menu should anchored to right or left corner of parent view.\n\n| Type    | Required |\n|---------|----------|\n| boolean | No       |\n\n### `shouldOpenOnLongPress`\n\nBoolean determining if menu should open after long press or on normal press\n\n| Type    | Required |\n|---------|----------|\n| boolean | No       |\n\n### `actions`\n\nActions to be displayed in the menu.\n\n| Type         | Required |\n|--------------|----------|\n| MenuAction[] | Yes      |\n\n### `themeVariant` (iOS only)\n\nString to override theme of the menu. If you want to control theme universally across your app, [see this package](https://github.com/vonovak/react-native-theme-control).\n\n| Type                  | Required |\n|-----------------------|----------|\n| enum('light', 'dark') | No       |\n\n#### `MenuAction`\n\nObject representing Menu Action.\n\n```ts\nexport type MenuAction = {\n  /**\n   * Identifier of the menu action.\n   * The value set in this id will be returned when menu is selected.\n   */\n  id?: string;\n  /**\n   * The action's title.\n   */\n  title: string;\n  /**\n   * (Android only)\n   * The action's title color.\n   * @platform Android\n   */\n  titleColor?: number | ColorValue;\n  /**\n   * (iOS14+ only)\n   * An elaborated title that explains the purpose of the action.\n   * @platform iOS\n   */\n  subtitle?: string;\n  /**\n   * The attributes indicating the style of the action.\n   */\n  attributes?: MenuAttributes;\n  /**\n   * (iOS14+ only)\n   * The state of the action.\n   * @platform iOS\n   */\n  state?: MenuState;\n  /**\n   * (Android and iOS13+ only)\n   * - The action's image.\n   * - Allows icon name included in project or system (Android) resources drawables and\n   * in SF Symbol (iOS)\n   * @example // (iOS)\n   * image=\"plus\"\n   * @example // (Android)\n   * image=\"ic_menu_add\"\n   */\n  image?: string;\n  /**\n   * (Android and iOS13+ only)\n   * - The action's image color.\n   */\n  imageColor?: number | ColorValue;\n  /**\n   * (Android and iOS14+ only)\n   * - Actions to be displayed in the sub menu\n   * - On Android it does not support nesting next sub menus in sub menu item\n   */\n  subactions?: MenuAction[];\n};\n```\n\n#### `MenuAttributes`\n\nThe attributes indicating the style of the action.\n\n```ts\ntype MenuAttributes = {\n  /**\n   * An attribute indicating the destructive style.\n   */\n  destructive?: boolean;\n  /**\n   * An attribute indicating the disabled style.\n   */\n  disabled?: boolean;\n  /**\n   * An attribute indicating the hidden style.\n   */\n  hidden?: boolean;\n};\n```\n\n#### `MenuState`\n\nThe state of the action.\n\n```ts\n/**\n * The state of the action.\n * - off: A constant indicating the menu element is in the “off” state.\n * - on: A constant indicating the menu element is in the “on” state.\n * - mixed: A constant indicating the menu element is in the “mixed” state.\n */\ntype MenuState = 'off' | 'on' | 'mixed';\n```\n\n### `onPressAction`\n\nCallback function that will be called when selecting a menu item.\nIt will contain id of the given action.\n\n| Type                    | Required |\n|-------------------------|----------|\n| ({nativeEvent}) =\u003e void | No       |\n\n### Events\n\n#### `onCloseMenu`\n\nCallback function that will be called when the menu is dismissed. This event fires at the start of the dismissal, before any animations complete.\n\n| Type       | Required |\n|------------|----------|\n| () =\u003e void | No       |\n\n#### `onOpenMenu`\n\nCallback function that will be called when the menu is opened. This event fires right before the menu is displayed.\n\n| Type       | Required |\n|------------|----------|\n| () =\u003e void | No       |\n\nExample usage:\n```jsx\n\u003cMenuView\n  onOpenMenu={() =\u003e {\n    console.log('Menu was opened');\n  }}\n  onCloseMenu={() =\u003e {\n    console.log('Menu was closed');\n  }}\n  // ... other props\n\u003e\n  \u003cView\u003e\n    \u003cText\u003eOpen Menu\u003c/Text\u003e\n  \u003c/View\u003e\n\u003c/MenuView\u003e\n```\n## Testing with Jest\n\nIn some cases, you might want to mock the package to test your components. You can do this by using the `jest.mock` function.\n\n```ts\nimport type { MenuComponentProps } from '@react-native-menu/menu';\n\njest.mock('@react-native-menu/menu', () =\u003e ({\n  MenuView: jest.fn((props: MenuComponentProps) =\u003e {\n    const React = require('react');\n\n    class MockMenuView extends React.Component {\n      render() {\n        return React.createElement(\n          'View',\n          { testID: props.testID },\n          // Dynamically mock each action\n          props.actions.map(action =\u003e\n            React.createElement('Button', {\n              key: action.id,\n              title: action.title,\n              onPress: () =\u003e {\n                if (action.id \u0026\u0026 props?.onPressAction) {\n                  props.onPressAction({ nativeEvent: { event: action.id } });\n                }\n              },\n              testID: action.id\n            })\n          ),\n          this.props.children\n        );\n      }\n    }\n\n    return React.createElement(MockMenuView, props);\n  })\n}));\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n[gha-badge]: https://github.com/react-native-menu/menu/workflows/Build/badge.svg\n[npm-badge]: https://img.shields.io/npm/v/@react-native-menu/menu.svg?style=flat-square\n[support-badge]: https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg?style=flat-square\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-menu%2Fmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-native-menu%2Fmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-menu%2Fmenu/lists"}