Multiple menus in unstable_headerRightItems cause handler index collision

[cvburgess]

Description

When using multiple menus in unstable_headerRightItems, selecting an item from one menu triggers the handler from a different menu at the same index position. For example, selecting the first item in Menu A triggers the handler for the first item in Menu B.

Menu item handlers appear to be stored in a flat array, causing index collisions between different menus.

Workaround: Moving one menu to unstable_headerLeftItems resolves the issue, since left and right items appear to have separate handler arrays. Adding identifier properties to menu items did not resolve the issue.

Steps to reproduce

1. Create a screen with two menus in unstable_headerRightItems:

navigation.setOptions({
  unstable_headerRightItems: () => [
    {
      type: "menu",
      label: "Filter",
      icon: { type: "sfSymbol", name: "line.3.horizontal.decrease" },
      menu: {
        items: [
          {
            type: "action",
            label: "Sort by date",
            onPress: () => console.log("Sort by date"), // Index 0 in Menu 1
          },
          {
            type: "action",
            label: "Sort by name",
            onPress: () => console.log("Sort by name"), // Index 1 in Menu 1
          },
        ],
      },
    },
    {
      type: "menu",
      label: "Add",
      icon: { type: "sfSymbol", name: "plus" },
      menu: {
        items: [
          {
            type: "action",
            label: "Import from URL",
            onPress: () => console.log("Import URL"), // Index 0 in Menu 2
          },
          {
            type: "action",
            label: "Enter manually",
            onPress: () => console.log("Enter manually"), // Index 1 in Menu 2
          },
        ],
      },
    },
  ],
});

2. Open the Filter menu and tap "Sort by date"
3. Observe that "Import URL" is logged instead of "Sort by date"

Snack or a link to a repository

No response

Screens version

4.19.0

React Native version

0.81.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo

Architecture

New Architecture

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[kkafar]

Thanks for the report, makes sense. I add this to our backlog.