feat(menu): add selectedIdentifier prop for controlled selection

- Add selectedIdentifier prop to native interfaces
- Update Android and iOS implementations to respect the prop
- Modify example app to demonstrate controlled usage

Author: sbaiahmed1

README.md

@@ -114,6 +114,28 @@ const styles = StyleSheet.create({
 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');
+
+<MenuView
+  selectedIdentifier={selectedSort}
+  menuItems={[
+    { identifier: 'date', title: 'Date' },
+    { identifier: 'name', title: 'Name' },
+    { identifier: 'size', title: 'Size' },
+  ]}
+  onMenuSelect={({ nativeEvent }) => setSelectedSort(nativeEvent.identifier)}
+>
+  <View style={styles.menuButton}>
+    <Text>📊 Sort by: {selectedSort}</Text>
+  </View>
+</MenuView>
+```
+
 ### Custom Styled Trigger
 
 ```tsx
@@ -159,6 +181,7 @@ export default App;
 | `children` | `ReactNode` | **Yes** | - | The trigger component that opens the menu when tapped |
 | `menuItems` | `MenuItem[]` | Yes | `[]` | Array of menu items to display |
 | `onMenuSelect` | `(event: MenuSelectEvent) => void` | No | - | Callback fired when a menu item is selected |
+| `selectedIdentifier` | `string` | No | - | Controlled selected item identifier; shows a native checkmark for the matching item |
 | `checkedColor` | `string` | No | `#007AFF` | Color for checked/selected menu items (Android only) |
 | `uncheckedColor` | `string` | No | `#8E8E93` | Color for unchecked/unselected menu items (Android only) |
 | `color` | `string` | No | - | Reserved for future use |
@@ -217,8 +240,8 @@ The MenuView component accepts any React Native component as a child, which beco
 - **UI:** Native `UIMenu` attached to an invisible `UIButton` overlay
 - **Menu Items:** Native `UIAction` elements with system styling
 - **Trigger:** Creates transparent button overlay on top of child view to show native menu
-- **Checkmarks:** Native system checkmarks with `UIMenuElementStateOn`
-- **Selection:** Native iOS menu behavior with smooth animations
+- **Checkmarks:** Controlled via `selectedIdentifier` and rendered using `UIMenuElementStateOn`
+- **Selection:** Emits `onMenuSelect` without mutating native state; update `selectedIdentifier` in React to reflect changes
 
 **Key Implementation Details:**
 - Disables user interaction on child views recursively
@@ -235,6 +258,7 @@ The MenuView component accepts any React Native component as a child, which beco
 | Unchecked Color | System default | Fully customizable |
 | Animation | Native iOS animation | Slide up animation |
 | Scrolling | Native UIMenu scrolling | Custom ScrollView (max 40% screen) |
+| Selection State | Controlled via `selectedIdentifier` | use `selectedIdentifier` for cross-platform parity |
 | Appearance | iOS system theme | White background with rounded corners |
 
 ## Example Project
@@ -272,6 +296,10 @@ yarn android
 
 **Android:** Ensure your child component doesn't have `onPress` or other touch handlers that might interfere. The MenuView intercepts all touch events at the parent level.
 
+### Checkmark not updating on iOS/Android
+
+Pass and update `selectedIdentifier`. iOS does not shift the checkmark automatically—reflect selection in props via your `onMenuSelect` handler.
+
 ### Children prop is required
 
 The MenuView component requires a child component to act as the trigger. Always wrap your trigger in the MenuView:

android/src/main/java/com/menu/MenuView.kt

@@ -87,6 +87,10 @@ class MenuView(context: Context) : FrameLayout(context) {
         }
     }
 
+    fun setSelectedIdentifier(selectedIdentifier: String?) {
+        this.selectedItemIdentifier = selectedIdentifier
+    }
+
     fun setMenuItems(menuItems: ReadableArray?) {
         val items = mutableListOf<Map<String, String>>()
 
@@ -288,7 +292,7 @@ class MenuView(context: Context) : FrameLayout(context) {
     }
 
     private fun selectMenuItem(identifier: String, title: String) {
-        selectedItemIdentifier = identifier
+        // No longer store selectedIdentifier internally - it's controlled by props
         sendMenuSelection(identifier, title)
     }
 

android/src/main/java/com/menu/MenuViewManager.kt

@@ -35,6 +35,11 @@ class MenuViewManager : ViewGroupManager<MenuView>() {
         view.setMenuItems(menuItems)
     }
 
+    @ReactProp(name = "selectedIdentifier")
+    fun setSelectedIdentifier(view: MenuView, selectedIdentifier: String?) {
+        view.setSelectedIdentifier(selectedIdentifier)
+    }
+
     override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
         return mapOf(
             "onMenuSelect" to mapOf(

example/src/App.tsx

@@ -10,7 +10,7 @@ import { useState } from 'react';
 import { MenuView } from 'react-native-menus';
 
 const App = () => {
-  const [selectedTheme, setSelectedTheme] = useState('system');
+  const [selectedTheme, setSelectedTheme] = useState('dark');
   const [selectedSort, setSelectedSort] = useState('date');
 
   const handleMenuSelect = (event: {
@@ -51,6 +51,7 @@ const App = () => {
             <MenuView
               checkedColor="#007AFF"
               uncheckedColor="#8E8E93"
+              selectedIdentifier={selectedTheme}
               menuItems={[
                 { identifier: 'light', title: 'Light Mode' },
                 { identifier: 'dark', title: 'Dark Mode' },
@@ -78,6 +79,7 @@ const App = () => {
             <MenuView
               checkedColor="#34C759"
               uncheckedColor="#8E8E93"
+              selectedIdentifier={selectedSort}
               menuItems={[
                 { identifier: 'date', title: 'Date' },
                 { identifier: 'name', title: 'Name' },

ios/MenuView.mm

@@ -19,7 +19,6 @@ @implementation MenuView {
     UIColor *_textColor;
     UIColor *_checkedColor;
     UIColor *_uncheckedColor;
-    NSString *_selectedIdentifier;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -82,7 +81,7 @@ - (void)setupChildViewAsMenuTrigger:(UIView *)childView
     if ([childView isKindOfClass:[UIButton class]]) {
         _menuButton = (UIButton *)childView;
         _menuButton.showsMenuAsPrimaryAction = YES;
-        [self updateMenuItems:_menuItems];
+        [self updateMenuItems:_menuItems selectedIdentifier:nil];
     } else {
         // For non-button children, create an invisible button overlay to show the menu
         [self disableUserInteractionRecursively:childView];
@@ -103,7 +102,7 @@ - (void)setupChildViewAsMenuTrigger:(UIView *)childView
             [_menuButton.bottomAnchor constraintEqualToAnchor:self.bottomAnchor]
         ]];
 
-        [self updateMenuItems:_menuItems];
+        [self updateMenuItems:_menuItems selectedIdentifier:nil];
     }
 }
 
@@ -156,6 +155,13 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
         }
     }
 
+    // Detect selectedIdentifier change
+    bool selectedIdentifierChanged = (oldViewProps.selectedIdentifier != newViewProps.selectedIdentifier);
+    NSString *currentSelectedIdentifier = nil;
+    if (!newViewProps.selectedIdentifier.empty()) {
+        currentSelectedIdentifier = [[NSString alloc] initWithUTF8String:newViewProps.selectedIdentifier.c_str()];
+    }
+    
     if (menuItemsChanged) {
         NSMutableArray *items = [[NSMutableArray alloc] init];
         for (const auto &item : newViewProps.menuItems) {
@@ -164,13 +170,15 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
             [items addObject:@{@"identifier": identifier, @"title": title}];
         }
         _menuItems = [items copy];
-        [self updateMenuItems:_menuItems];
+        [self updateMenuItems:_menuItems selectedIdentifier:currentSelectedIdentifier];
+    } else if (selectedIdentifierChanged) {
+        [self updateMenuItems:_menuItems selectedIdentifier:currentSelectedIdentifier];
     }
 
     [super updateProps:props oldProps:oldProps];
 }
 
-- (void)updateMenuItems:(NSArray<NSDictionary *> *)menuItems
+- (void)updateMenuItems:(NSArray<NSDictionary *> *)menuItems selectedIdentifier:(NSString *)selectedIdentifier
 {
     if (!_menuButton) {
         // Menu button not set yet, will be updated when child view is added
@@ -195,8 +203,8 @@ - (void)updateMenuItems:(NSArray<NSDictionary *> *)menuItems
             [self selectMenuItem:identifier title:title];
         }];
 
-        // Set state based on current selection
-        if ([identifier isEqualToString:_selectedIdentifier]) {
+        // Set state based on current selection (controlled via props)
+        if (selectedIdentifier != nil && [identifier isEqualToString:selectedIdentifier]) {
             action.state = UIMenuElementStateOn;
         }
 
@@ -209,10 +217,6 @@ - (void)updateMenuItems:(NSArray<NSDictionary *> *)menuItems
 
 - (void)selectMenuItem:(NSString *)identifier title:(NSString *)title
 {
-    _selectedIdentifier = identifier;
-    if (_menuButton) {
-        [self updateMenuItems:_menuItems]; // Refresh to update checkmarks
-    }
     [self sendMenuSelection:identifier title:title];
 }
 

src/MenuViewNativeComponent.ts

@@ -17,6 +17,7 @@ export interface NativeProps extends ViewProps {
   checkedColor?: string;
   uncheckedColor?: string;
   menuItems?: ReadonlyArray<MenuItem>;
+  selectedIdentifier?: string;
   onMenuSelect?: BubblingEventHandler<MenuSelectEvent>;
 }