# 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 Menu
iOS (Native UIMenu) 		Android Menu
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 - ✅ Per-item test handles for E2E testing (Detox, Appium, XCUITest) ## 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 }); ``` ### Imperative Usage (Programmatic Open/Close) You can use a ref to open or close the menu programmatically. ```tsx import React, { useRef } from 'react'; import { View, Button } from 'react-native'; import { MenuView, type NativeRef } from 'react-native-menus'; const App = () => { const menuRef = useRef(null); return (