feat(iOS): add missing features to bar button items (#3396)

## Description

Some features are missing for header items.

**Menu**:
- display inline (only for submenu) -
https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayinline?language=objc
- display as palette -
https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayaspalette?language=objc
- single selection -
https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/singleselection?language=objc
- destructive (only for submenu) -
https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/destructive?language=objc

**MenuAction**:
- subtitle -
https://developer.apple.com/documentation/uikit/uimenuelement/subtitle?language=objc

## Changes

Add missing properties.

<img height="900"
alt="simulator_screenshot_0286E34E-D82F-4377-9923-7909026EBC84"
src="https://github.com/user-attachments/assets/30fbe67b-83a7-4081-ba9a-cea775b9ee27"
/>


## Test code and steps to reproduce

<!--
Please include code that can be used to test this change and short
description how this example should work.
This snippet should be as minimal as possible and ready to be pasted
into editor (don't exclude exports or remove "not important" parts of
reproduction example)
-->

## Checklist

- [x] Included code example that can be used to test this change
- [x] Updated TS types
- [ ] Updated documentation: <!-- For adding new props to native-stack
-->
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [ ] Ensured that CI passes

---------

Co-authored-by: Kacper Kafara <[email protected]>

Author: Ubax

apps/src/screens/BarButtonItems.tsx

@@ -437,13 +437,16 @@ export default function BarButtonItemsExample() {
                   },
                   {
                     label: 'Submenu',
+                    displayInline: true,
+                    destructive: true,
                     icon: { type: 'sfSymbol', name: 'star' },
                     type: 'submenu',
                     items: [
                       {
                         label: 'Sub Action 1',
                         state: 'mixed',
                         type: 'action',
+                        subtitle: 'With subtitle',
                         onPress: () => Alert.alert('Sub Action 1 pressed'),
                         destructive: true,
                         keepsMenuPresented: true,
@@ -456,6 +459,26 @@ export default function BarButtonItemsExample() {
                       },
                     ],
                   },
+                  {
+                    label: 'Palette',
+                    displayInline: true,
+                    displayAsPalette: true,
+                    destructive: true,
+                    type: 'submenu',
+                    items: [
+                      {
+                        state: 'on',
+                        icon: { type: 'sfSymbol', name: '0.circle.fill' },
+                        type: 'action',
+                        onPress: () => Alert.alert('Sub Action 1 pressed'),
+                      },
+                      {
+                        icon: { type: 'sfSymbol', name: '1.circle.fill' },
+                        type: 'action',
+                        onPress: () => Alert.alert('Sub Action 2 pressed'),
+                      },
+                    ],
+                  },
                 ],
               },
             },

guides/GUIDE_FOR_LIBRARY_AUTHORS.md

@@ -624,12 +624,17 @@ menu?: {
       label?: string;
       type: 'submenu';
       icon?: PlatformIconIOSSfSymbol;
+      displayInline?: boolean; // Whether to display submenu inline - https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayinline
+      destructive?: boolean; // Attribute indicating destructive style. Read more: https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/destructive
+      singleSelection?: boolean; // Whether submenu allows single selection - https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/singleselection
+      displayAsPalette?: boolean; // Whether to display submenu as palette - https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayaspalette
       items: menu['items']; // References itself so you can create inifinte deep menus. So either actions or more submenus
     }
   >
 }
 ```
 
+
 #### The spacing item supports:
 
 `type: 'spacing'` — Type of the item.

ios/RNSBarButtonItem.mm

@@ -4,6 +4,8 @@
 #import "RNSDefines.h"
 #import "RNSImageLoadingHelper.h"
 
+static UIMenuOptions RNSMakeUIMenuOptionsFromConfig(NSDictionary *config);
+
 @implementation RNSBarButtonItem {
   NSString *_buttonId;
   RNSBarButtonItemAction _itemAction;
@@ -160,10 +162,11 @@ + (UIMenu *)initUIMenuWithDict:(NSDictionary<NSString *, id> *)dict menuAction:(
   }
   NSString *title = dict[@"title"];
   NSString *sfSymbolName = dict[@"sfSymbolName"];
+
   return [UIMenu menuWithTitle:title
                          image:sfSymbolName ? [UIImage systemImageNamed:sfSymbolName] : nil
                     identifier:nil
-                       options:0
+                       options:RNSMakeUIMenuOptionsFromConfig(dict)
                       children:elements];
 }
 
@@ -223,6 +226,11 @@ + (UIAction *)createActionItemFromConfig:(NSDictionary *)dict menuAction:(RNSBar
 #endif
   }
 
+  NSString *subtitle = dict[@"subtitle"];
+  if (subtitle != nil) {
+    actionElement.subtitle = subtitle;
+  }
+
   return actionElement;
 }
 
@@ -323,3 +331,30 @@ - (void)setBadgeFromConfig:(NSDictionary *)badgeObj
 #endif
 
 @end
+
+UIMenuOptions RNSMakeUIMenuOptionsFromConfig(NSDictionary *config)
+{
+  UIMenuOptions options = 0;
+  NSNumber *singleSelection = config[@"singleSelection"];
+  NSNumber *displayAsPalette = config[@"displayAsPalette"];
+  NSNumber *displayInline = config[@"displayInline"];
+  NSNumber *destructive = config[@"destructive"];
+
+  if (singleSelection != nil && [singleSelection boolValue]) {
+    options |= UIMenuOptionsSingleSelection;
+  }
+#if RNS_IPHONE_OS_VERSION_AVAILABLE(17_0)
+  if (@available(iOS 17.0, *)) {
+    if (displayAsPalette != nil && [displayAsPalette boolValue]) {
+      options |= UIMenuOptionsDisplayAsPalette;
+    }
+  }
+#endif // RNS_IPHONE_OS_VERSION_AVAILABLE(17_0)
+  if (displayInline != nil && [displayInline boolValue]) {
+    options |= UIMenuOptionsDisplayInline;
+  }
+  if (destructive != nil && [destructive boolValue]) {
+    options |= UIMenuOptionsDestructive;
+  }
+  return options;
+}

src/types.tsx

@@ -1106,6 +1106,7 @@ export interface HeaderBarButtonItemWithAction
 export interface HeaderBarButtonItemMenuAction {
   type: 'action';
   title?: string;
+  subtitle?: string;
   onPress: () => void;
   icon?: PlatformIconIOSSfSymbol;
   /**
@@ -1151,13 +1152,19 @@ export interface HeaderBarButtonItemSubmenu {
   title?: string;
   icon?: PlatformIconIOSSfSymbol;
   items: HeaderBarButtonItemWithMenu['menu']['items'];
+  displayInline?: boolean;
+  destructive?: boolean;
+  singleSelection?: boolean;
+  displayAsPalette?: boolean;
 }
 
 export interface HeaderBarButtonItemWithMenu extends SharedHeaderBarButtonItem {
   type: 'menu';
   menu: {
     title?: string;
     items: (HeaderBarButtonItemMenuAction | HeaderBarButtonItemSubmenu)[];
+    singleSelection?: boolean;
+    displayAsPalette?: boolean;
   };
   /**
    * A Boolean value that indicates whether the button title should indicate selection or not.