Menu does not appear when used inside headerRight in Stack.Screen

[bbm-sghong]

Description

The Menu component works correctly in most parts of the UI. However, when used inside headerRight in Stack.Screen, the button is clickable, but the actual menu does not appear on the screen.

---

CodeSandbox/Snack link

Reproduction Repository

---

Steps to reproduce

1. Use the MenuSample component inside headerRight of Stack.Screen:

   <Stack.Screen
     name="index"
     options={{
       title: "Today",
       headerLargeTitle: true,
       headerRight: () => <MenuSample pageName="HeaderMenu" />
     }}
   />

2. Click the Menu button inside the header.
3. The button responds to the click, but the menu does not appear on the screen.

---

Code Example

Root Layout (Where headerRight is defined)

import { Stack } from "expo-router";
import "@/global.css";
import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
import { Colors } from "@/constants/Colors";
import MenuSample from "@/components/MenuSample";

export default function RootLayout() {
  return (
    <GluestackUIProvider mode="light">
      <Stack
        screenOptions={{
          headerShadowVisible: false,
          contentStyle: { backgroundColor: Colors.background },
        }}
      >
        <Stack.Screen
          name="index"
          options={{
            title: "Today",
            headerLargeTitle: true,
            headerRight: () => <MenuSample pageName="HeaderMenu" />,
          }}
        />
      </Stack>
    </GluestackUIProvider>
  );
}

Menu Component (MenuSample.tsx)

import React from 'react'
import { Center } from './ui/center'
import { Menu, MenuItem, MenuItemLabel } from './ui/menu'
import { Button, ButtonText } from './ui/button'
import { Icon } from './ui/icon'
import { AddIcon, GlobeIcon } from './ui/icon'

type MenuSampleProps = {
    pageName: string
}

const MenuSample = ({ pageName }: MenuSampleProps) => {
    console.log("pageName : ", pageName);

    return (
        <Center>
            <Menu
                placement='bottom'
                offset={5}
                trigger={({ ...triggerProps }) => {
                    return <Button {...triggerProps}>
                        <ButtonText>Menu</ButtonText>
                    </Button>;
                }}
            >
                <MenuItem key="Add account" textValue="Add account">
                    <Icon as={AddIcon} size="sm" className="mr-2" />
                    <MenuItemLabel size="sm">Add account</MenuItemLabel>
                </MenuItem>
                <MenuItem key="Community" textValue="Community">
                    <Icon as={GlobeIcon} size="sm" className="mr-2" />
                    <MenuItemLabel size="sm">Community</MenuItemLabel>
                </MenuItem>
            </Menu>
        </Center>
    )
}

export default MenuSample;

---

gluestack-ui Version

@gluestack-ui/menu: "^0.2.37"

---

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

---

Other Platform

No response

---

Additional Information