<DropdownMenu /> in a header with React Navigation does not work on Android

[huhulacolle]

Hello,

I am trying to implement a DropdownMenu in the right side of the header of my app using React Navigation. The menu works perfectly on iOS, but on Android, clicking on it has no effect—it simply does not open.

I even copied the code from a working tutorial to ensure there were no mistakes, but the issue persists.

I am using createStackNavigator (not createNativeStackNavigator), and I wonder if this could be part of the issue.

Any help would be greatly appreciated. Thank you!

---

Steps to Reproduce:

• Create a screen with a custom header using createStackNavigator from React Navigation.
• Add a DropdownMenu to the headerRight option as shown in the code below.
• Run the app on Android and iOS.
• Observe the behavior: the dropdown works on iOS but not on Android.

---

Code Example:

<Stack.Screen
  name="board"
  component={Espace}
  options={{
    headerTransparent: true,
    headerTitle: () => <Header name={"Mon Espace"} />,
    headerRight: () => (
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
          <Ionicons name="ellipsis-horizontal" size={24} />
        </DropdownMenu.Trigger>
        <DropdownMenu.Content>
          <DropdownMenu.Label
            placeholder="My Label"
            onPointerEnterCapture={() => {}}
            onPointerLeaveCapture={() => {}}
          >
            My Label
          </DropdownMenu.Label>

          <DropdownMenu.Item
            key="42"
            placeholder="Item Placeholder"
            onPointerEnterCapture={() => {}}
            onPointerLeaveCapture={() => {}}
          >
            <DropdownMenu.ItemTitle>My item</DropdownMenu.ItemTitle>
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Root>
    ),
  }}
/>

[nandorojo]

Hey thanks for sharing. Could you share a screenshot?