https://github.com/sbaiahmed1/react-native-menus
A native menu component for React Native that provides platform-specific context menus for both Android and iOS.
https://github.com/sbaiahmed1/react-native-menus
ios-menu react-native-menu select-dropdown
Last synced: 4 months ago
JSON representation
A native menu component for React Native that provides platform-specific context menus for both Android and iOS.
- Host: GitHub
- URL: https://github.com/sbaiahmed1/react-native-menus
- Owner: sbaiahmed1
- License: mit
- Created: 2025-10-13T01:12:03.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-12-10T23:06:18.000Z (6 months ago)
- Last Synced: 2026-01-19T15:33:54.908Z (4 months ago)
- Topics: ios-menu, react-native-menu, select-dropdown
- Language: Kotlin
- Homepage:
- Size: 1.77 MB
- Stars: 19
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Native Menus
A 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.
## Screenshots
iOS (Native UIMenu)
Android (Modal Dialog)
## Features
- ✅ Native context menu implementation (UIMenu on iOS, Modal on Android)
- ✅ Custom trigger components - pass any React Native component as a child
- ✅ Customizable colors for menu items
- ✅ Checkmark support with custom colors
- ✅ SF Symbols support on iOS (iosSymbol property)
- ✅ Subtitle support for menu items
- ✅ Destructive action styling (Red text)
- ✅ Theme variant support (Light/Dark/System)
- ✅ Scrollable menus for long lists
- ✅ Event handling for menu item selection
- ✅ TypeScript support
- ✅ Fabric (New Architecture) compatible
- ✅ Improved Accessibility support
## Installation
```bash
npm install react-native-menus
# or
yarn add react-native-menus
```
### iOS Setup
For iOS, run:
```bash
cd ios && pod install
```
### Android Setup
No additional setup required for Android.
## Usage
### Basic Example
```tsx
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { MenuView } from 'react-native-menus';
const App = () => {
const [selectedTheme, setSelectedTheme] = useState('system');
const handleMenuSelect = (event: {
nativeEvent: { identifier: string; title: string };
}) => {
setSelectedTheme(event.nativeEvent.identifier);
console.log('Selected:', event.nativeEvent.title);
};
return (
🌓 Theme: {selectedTheme}
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
menuButton: {
backgroundColor: '#fff',
paddingHorizontal: 20,
paddingVertical: 12,
borderRadius: 8,
borderWidth: 1,
borderColor: '#ddd',
},
menuButtonText: {
fontSize: 16,
color: '#333',
},
});
export default App;
```
### Controlled Selection (Recommended)
Use 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.
```tsx
const [selectedSort, setSelectedSort] = useState('date');
setSelectedSort(nativeEvent.identifier)}
>
📊 Sort by: {selectedSort}
```
### Custom Styled Trigger
```tsx
👤 Account Menu
```
### Long Scrollable List
```tsx
📋 Select Option
```
### Disabled Menu
```tsx
const [isDisabled, setIsDisabled] = useState(false);
{
setIsDisabled(nativeEvent.identifier === 'disable');
}}
>
{isDisabled ? '🔒 Menu Disabled' : '🔓 Menu Enabled'}
// Add these styles
const styles = StyleSheet.create({
// ... other styles
});
```
## API Reference
### MenuView Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `menuItems` | `MenuItem[]` | `[]` | Array of menu items to display |
| `title` | `string` | `undefined` | Title of the menu (Android only) |
| `androidDisplayMode` | `'dialog' \| 'tooltip'` | `'dialog'` | Display mode for the menu on Android (Android only) |
| `themeVariant` | `'light' \| 'dark' \| 'system'` | `'system'` | Theme variant for the menu background and text (Android only) |
| `selectedIdentifier` | `string` | `undefined` | Identifier of the currently selected item |
| `checkedColor` | `string` | `'#007AFF'` | Color of the checkmark for selected items |
| `uncheckedColor` | `string` | `'#8E8E93'` | Color of the checkmark for unselected items (Android only) |
| `color` | `string` | `undefined` | Tint color for the menu button text (if using default button) |
| `disabled` | `boolean` | `false` | Whether the menu is disabled |
| `onMenuSelect` | `(event: NativeSyntheticEvent) => void` | `undefined` | Callback when a menu item is selected |
### MenuItem Object
| Property | Type | Description |
|----------|------|-------------|
| `identifier` | `string` | Unique identifier for the item |
| `title` | `string` | Text to display |
| `subtitle` | `string` | Subtitle text (optional) |
| `destructive` | `boolean` | Whether the item represents a destructive action (red text) |
| `iosSymbol` | `string` | SF Symbol name (iOS only) |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT