{"id":41730081,"url":"https://github.com/sbaiahmed1/react-native-menus","last_synced_at":"2026-01-24T23:28:53.527Z","repository":{"id":318741365,"uuid":"1075059138","full_name":"sbaiahmed1/react-native-menus","owner":"sbaiahmed1","description":"A native menu component for React Native that provides platform-specific context menus for both Android and iOS. ","archived":false,"fork":false,"pushed_at":"2025-12-10T23:06:18.000Z","size":1860,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-19T15:33:54.908Z","etag":null,"topics":["ios-menu","react-native-menu","select-dropdown"],"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/sbaiahmed1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-13T01:12:03.000Z","updated_at":"2026-01-07T05:02:06.000Z","dependencies_parsed_at":"2025-10-14T22:12:32.402Z","dependency_job_id":"cf340444-91b3-4bc1-886a-6f6dbe4afb2c","html_url":"https://github.com/sbaiahmed1/react-native-menus","commit_stats":null,"previous_names":["sbaiahmed1/react-native-menus"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/sbaiahmed1/react-native-menus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbaiahmed1%2Freact-native-menus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbaiahmed1%2Freact-native-menus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbaiahmed1%2Freact-native-menus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbaiahmed1%2Freact-native-menus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sbaiahmed1","download_url":"https://codeload.github.com/sbaiahmed1/react-native-menus/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbaiahmed1%2Freact-native-menus/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28738991,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-24T22:12:27.248Z","status":"ssl_error","status_checked_at":"2026-01-24T22:12:10.529Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["ios-menu","react-native-menu","select-dropdown"],"created_at":"2026-01-24T23:28:24.868Z","updated_at":"2026-01-24T23:28:49.033Z","avatar_url":"https://github.com/sbaiahmed1.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Menus\n\nA native menu component for React Native that provides platform-specific context menus for both Android and iOS. Pass any custom component as a child to trigger native menus.\n\n## Screenshots\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"ios-image.png\" alt=\"iOS Menu\" height=\"600\" width=\"400\"/\u003e\n      \u003cbr /\u003e\n      \u003cstrong\u003eiOS (Native UIMenu)\u003c/strong\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"android-image.png\" alt=\"Android Menu\" height=\"600\" width=\"400\"/\u003e\n      \u003cbr /\u003e\n      \u003cstrong\u003eAndroid (Modal Dialog)\u003c/strong\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Features\n\n- ✅ Native context menu implementation (UIMenu on iOS, Modal on Android)\n- ✅ Custom trigger components - pass any React Native component as a child\n- ✅ Customizable colors for menu items\n- ✅ Checkmark support with custom colors\n- ✅ SF Symbols support on iOS (iosSymbol property)\n- ✅ Subtitle support for menu items\n- ✅ Destructive action styling (Red text)\n- ✅ Theme variant support (Light/Dark/System)\n- ✅ Scrollable menus for long lists\n- ✅ Event handling for menu item selection\n- ✅ TypeScript support\n- ✅ Fabric (New Architecture) compatible\n- ✅ Improved Accessibility support\n\n## Installation\n\n```bash\nnpm install react-native-menus\n# or\nyarn add react-native-menus\n```\n\n### iOS Setup\n\nFor iOS, run:\n\n```bash\ncd ios \u0026\u0026 pod install\n```\n\n### Android Setup\n\nNo additional setup required for Android.\n\n## Usage\n\n### Basic Example\n\n```tsx\nimport React, { useState } from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { MenuView } from 'react-native-menus';\n\nconst App = () =\u003e {\n  const [selectedTheme, setSelectedTheme] = useState('system');\n\n  const handleMenuSelect = (event: {\n    nativeEvent: { identifier: string; title: string };\n  }) =\u003e {\n    setSelectedTheme(event.nativeEvent.identifier);\n    console.log('Selected:', event.nativeEvent.title);\n  };\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cMenuView\n        checkedColor=\"#007AFF\"\n        uncheckedColor=\"#8E8E93\"\n        menuItems={[\n          { identifier: 'light', title: 'Light Mode' },\n          { identifier: 'dark', title: 'Dark Mode' },\n          { identifier: 'system', title: 'System Default' },\n        ]}\n        onMenuSelect={handleMenuSelect}\n      \u003e\n        \u003cView style={styles.menuButton}\u003e\n          \u003cText style={styles.menuButtonText}\u003e\n            🌓 Theme: {selectedTheme}\n          \u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/MenuView\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  menuButton: {\n    backgroundColor: '#fff',\n    paddingHorizontal: 20,\n    paddingVertical: 12,\n    borderRadius: 8,\n    borderWidth: 1,\n    borderColor: '#ddd',\n  },\n  menuButtonText: {\n    fontSize: 16,\n    color: '#333',\n  },\n});\n\nexport default App;\n```\n\n### Controlled Selection (Recommended)\n\nUse the `selectedIdentifier` prop to fully control which item is marked as selected. Update it in your `onMenuSelect` handler to keep iOS and Android behavior consistent.\n\n```tsx\nconst [selectedSort, setSelectedSort] = useState('date');\n\n\u003cMenuView\n  selectedIdentifier={selectedSort}\n  menuItems={[\n    { identifier: 'date', title: 'Date' },\n    { identifier: 'name', title: 'Name' },\n    { identifier: 'size', title: 'Size' },\n  ]}\n  onMenuSelect={({ nativeEvent }) =\u003e setSelectedSort(nativeEvent.identifier)}\n\u003e\n  \u003cView style={styles.menuButton}\u003e\n    \u003cText\u003e📊 Sort by: {selectedSort}\u003c/Text\u003e\n  \u003c/View\u003e\n\u003c/MenuView\u003e\n```\n\n### Custom Styled Trigger\n\n```tsx\n\u003cMenuView\n  menuItems={[\n    { identifier: 'profile', title: 'View Profile' },\n    { identifier: 'settings', title: 'Settings' },\n    { identifier: 'logout', title: 'Logout' },\n  ]}\n  onMenuSelect={handleMenuSelect}\n\u003e\n  \u003cView style={styles.customButton}\u003e\n    \u003cText style={styles.customButtonText}\u003e👤 Account Menu\u003c/Text\u003e\n  \u003c/View\u003e\n\u003c/MenuView\u003e\n```\n\n### Long Scrollable List\n\n```tsx\n\u003cMenuView\n  checkedColor=\"#5856D6\"\n  menuItems={[\n    { identifier: 'opt1', title: 'Option 1' },\n    { identifier: 'opt2', title: 'Option 2' },\n    // ... many more items\n    { identifier: 'opt20', title: 'Option 20' },\n  ]}\n  onMenuSelect={handleMenuSelect}\n\u003e\n  \u003cView style={styles.menuButton}\u003e\n    \u003cText\u003e📋 Select Option\u003c/Text\u003e\n  \u003c/View\u003e\n\u003c/MenuView\u003e\n```\n\n### Disabled Menu\n\n```tsx\nconst [isDisabled, setIsDisabled] = useState(false);\n\n\u003cMenuView\n  disabled={isDisabled}\n  menuItems={[\n    { identifier: 'enable', title: 'Enable Menu' },\n    { identifier: 'disable', title: 'Disable Menu' },\n  ]}\n  onMenuSelect={({ nativeEvent }) =\u003e {\n    setIsDisabled(nativeEvent.identifier === 'disable');\n  }}\n\u003e\n  \u003cView style={[styles.menuButton, isDisabled \u0026\u0026 styles.disabledButton]}\u003e\n    \u003cText style={[styles.menuButtonText, isDisabled \u0026\u0026 styles.disabledText]}\u003e\n      {isDisabled ? '🔒 Menu Disabled' : '🔓 Menu Enabled'}\n    \u003c/Text\u003e\n  \u003c/View\u003e\n\u003c/MenuView\u003e\n\n// Add these styles\nconst styles = StyleSheet.create({\n  // ... other styles\n});\n```\n\n## API Reference\n\n### MenuView Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `menuItems` | `MenuItem[]` | `[]` | Array of menu items to display |\n| `title` | `string` | `undefined` | Title of the menu (Android only) |\n| `androidDisplayMode` | `'dialog' \\| 'tooltip'` | `'dialog'` | Display mode for the menu on Android (Android only) |\n| `themeVariant` | `'light' \\| 'dark' \\| 'system'` | `'system'` | Theme variant for the menu background and text (Android only) |\n| `selectedIdentifier` | `string` | `undefined` | Identifier of the currently selected item |\n| `checkedColor` | `string` | `'#007AFF'` | Color of the checkmark for selected items |\n| `uncheckedColor` | `string` | `'#8E8E93'` | Color of the checkmark for unselected items (Android only) |\n| `color` | `string` | `undefined` | Tint color for the menu button text (if using default button) |\n| `disabled` | `boolean` | `false` | Whether the menu is disabled |\n| `onMenuSelect` | `(event: NativeSyntheticEvent\u003cMenuSelectEvent\u003e) =\u003e void` | `undefined` | Callback when a menu item is selected |\n\n### MenuItem Object\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `identifier` | `string` | Unique identifier for the item |\n| `title` | `string` | Text to display |\n| `subtitle` | `string` | Subtitle text (optional) |\n| `destructive` | `boolean` | Whether the item represents a destructive action (red text) |\n| `iosSymbol` | `string` | SF Symbol name (iOS only) |\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbaiahmed1%2Freact-native-menus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsbaiahmed1%2Freact-native-menus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbaiahmed1%2Freact-native-menus/lists"}