feat: Initial code for menu in header items by kmichalikk · Pull Request #4138 · software-mansion/react-native-screens

kmichalikk · 2026-06-09T10:15:20Z

Closes https://github.com/software-mansion/react-native-screens-labs/issues/1178

Description

This PR adds some initial configuration for displaying nested header menus.

Changes

added menu prop for InlineHeaderItems
the menu can be given type "menu" | "menuItem", a title and a children for submenus

Before & after - visual documentation

Test plan

Added SFT test-stack-header-menu-ios. It includes only basic features and will be extended in the future.

Checklist

Included code example that can be used to test this change.
For visual changes, included screenshots / GIFs / recordings documenting the change.
For API changes, updated relevant public types.
Ensured that CI passes

Copilot

Pull request overview

This PR introduces an initial (experimental) nested header-menu configuration for the gamma iOS stack header items, wiring a new menu prop from JS types through Fabric props into native iOS menu construction, and adds a Single Feature Test scenario to exercise basic nested menu rendering.

Changes:

Added a menu prop to gamma stack header inline items (including Fabric native props) plus new TypeScript menu shape types.
Implemented iOS-side mapping from JS dictionaries into native menu data objects and a coordinator that builds UIMenu / UIAction trees.
Added an iOS-only SFT scenario (test-stack-header-menu-ios) and registered it in the stack-v5 scenario index.

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/fabric/gamma/stack/StackHeaderItemIOSNativeComponent.ts	Adds `menu` prop to Fabric native component props (`UnsafeMixed`).
src/components/gamma/stack/header/StackHeaderConfig.ios.types.ts	Extends inline header item types to accept an optional `menu`.
src/components/gamma/stack/header/ios/StackHeaderMenu.ios.types.ts	New TS types describing nested menu structures.
src/components/gamma/stack/header/ios/StackHeaderItem.ios.types.ts	Extends stack header item props with optional `menu`.
ios/gamma/stack/header/RNSStackHeaderMenuMapper.h	Declares native mapper that parses JS dictionaries into menu data.
ios/gamma/stack/header/RNSStackHeaderMenuMapper.mm	Implements parsing/validation of menu dictionaries into native data objects.
ios/gamma/stack/header/RNSStackHeaderMenuData.h	Defines native menu/menuItem data models and protocol for menu elements.
ios/gamma/stack/header/RNSStackHeaderMenuData.mm	Implements native menu/menuItem data model initializers.
ios/gamma/stack/header/RNSStackHeaderMenuCoordinator.h	Declares coordinator that applies native menus to bar button items.
ios/gamma/stack/header/RNSStackHeaderMenuCoordinator.mm	Builds `UIMenu`/`UIAction` trees and applies them to `UIBarButtonItem`.
ios/gamma/stack/header/RNSStackHeaderItemDataProviding.h	Extends header item data protocol with a `menu` property.
ios/gamma/stack/header/RNSStackHeaderItemComponentView.h	Exposes `menu` property on the component view implementing the protocol.
ios/gamma/stack/header/RNSStackHeaderItemComponentView.mm	Converts Fabric `menu` prop to native menu data and triggers invalidation.
ios/gamma/stack/header/RNSStackHeaderContentFactory.mm	Applies a parsed menu to the produced `UIBarButtonItem`.
apps/src/tests/single-feature-tests/stack-v5/test-stack-header-menu-ios/scenario.md	Adds manual test steps for nested header menu behavior on iOS.
apps/src/tests/single-feature-tests/stack-v5/test-stack-header-menu-ios/scenario-description.ts	Registers scenario metadata for the new SFT.
apps/src/tests/single-feature-tests/stack-v5/test-stack-header-menu-ios/index.tsx	Adds SFT implementation exercising nested menus and dynamic item counts.
apps/src/tests/single-feature-tests/stack-v5/index.ts	Registers the new iOS header-menu SFT in the stack-v5 suite.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

kligarski · 2026-06-11T11:55:17Z

 export interface NativeProps extends ViewProps {
  placement?: CT.WithDefault<Placement, 'trailing'>;
  label?: string | undefined;
+  menu?: CT.UnsafeMixed;


If you want typing here you can use util we already have in our repo for tabs appearance, currently in src/fabric/tabs/codegenUtils.ts.

kligarski · 2026-06-11T12:01:52Z

+
+export interface StackHeaderMenu {
+  type: 'menu';
+  title?: string | undefined;


Should we unify naming with menu items (title vs label)?

kligarski · 2026-06-11T12:28:49Z

+
+ (void)applyMenu:(nonnull RNSStackHeaderMenuData *)data toBarButtonItem:(nonnull UIBarButtonItem *)item
+{
+#if !TARGET_OS_TV || __TV_OS_VERSION_MAX_ALLOWED >= 170000


maybe we should create a macro for tvOS version, similar to RNS_IPHONE_OS_VERSION_AVAILABLE(v)?

kligarski · 2026-06-11T12:34:40Z

+
+#pragma mark - Helpers
+
+ (void)validateMenuKeys:(NSDictionary *)dict


I wonder if we should also enforce that all expected keys are present (e.g. type & chidren)

kligarski · 2026-06-11T12:37:13Z

+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNSStackHeaderMenuCoordinator : NSObject


coordinator or applicator or factory?

kligarski · 2026-06-11T12:38:44Z

+    }
+  }
+
+  return [UIMenu menuWithTitle:data.title ?: @"" children:elements];


is there a difference between @"" and nil here?

t0maboro · 2026-06-11T13:53:54Z

+
+ (nullable UIMenuElement *)buildElementFromData:(id<RNSStackHeaderMenuElement>)element
+{
+  if ([element isKindOfClass:[RNSStackHeaderMenuData class]]) {


nit: you may consider having a method on the protocol to avoid selecting the implementation based on the class type here

t0maboro · 2026-06-11T14:08:45Z

+{
+  for (NSString *key in dict) {
+    RCTAssert([key isEqualToString:@"type"] || [key isEqualToString:@"title"] || [key isEqualToString:@"children"],
+              @"Invalid key \"%@\" found in menu",


nit: insert [RNScreens] inside log

feat: Initial code for menu in header items

ff2fc4c

kmichalikk self-assigned this Jun 9, 2026

kmichalikk added type:feature New feature or request platform:ios Issue related to iOS part of the library area:header Issues / PRs related to header component in any form. area:stack-v5 Issues related to Native Stack v5 implementation labels Jun 9, 2026

kmichalikk requested review from Copilot and kligarski June 9, 2026 10:16

Copilot started reviewing on behalf of kmichalikk June 9, 2026 10:16 View session

kmichalikk requested review from kkafar and t0maboro June 9, 2026 10:16

Copilot AI reviewed Jun 9, 2026

View reviewed changes

Comment thread ios/gamma/stack/header/RNSStackHeaderMenuMapper.mm

Comment thread ios/gamma/stack/header/RNSStackHeaderMenuMapper.mm

Comment thread ios/gamma/stack/header/RNSStackHeaderMenuCoordinator.mm

Comment thread src/components/gamma/stack/header/ios/StackHeaderMenu.ios.types.ts

fix copilot suggestions

7e7226e

kligarski reviewed Jun 11, 2026

View reviewed changes

t0maboro approved these changes Jun 11, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Initial code for menu in header items#4138

feat: Initial code for menu in header items#4138
kmichalikk wants to merge 2 commits into
mainfrom
@kmichalikk/stack-v5-header-menu

kmichalikk commented Jun 9, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kligarski Jun 11, 2026

Uh oh!

kligarski Jun 11, 2026

Uh oh!

kligarski Jun 11, 2026

Uh oh!

kligarski Jun 11, 2026

Uh oh!

kligarski Jun 11, 2026

Uh oh!

kligarski Jun 11, 2026

Uh oh!

kligarski Jun 11, 2026

Uh oh!

t0maboro Jun 11, 2026

Uh oh!

t0maboro Jun 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants


		#pragma mark - Helpers

		+ (void)validateMenuKeys:(NSDictionary *)dict


		NS_ASSUME_NONNULL_BEGIN

		@interface RNSStackHeaderMenuCoordinator : NSObject

Uh oh!

Conversation

kmichalikk commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Before & after - visual documentation

Test plan

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kmichalikk commented Jun 9, 2026 •

edited

Loading