[ BUG ] Dropdown not working in headerRight

[aramis-it]

<Stack
      screenOptions={{
        headerRight: () => (
          <Dropdown />              // dropdown component as in Doc
        ),
      }}
    />

[mrzachnugent]

Hey @aramis-it , it seems like you found the fix from your comment here: https://github.com/mrzachnugent/react-native-reusables/issues/302#issuecomment-2735064752

If you are having a problem with the onPressIn for the dropdown-menu, you can trigger it programmatically as shown here: https://rnr-docs.vercel.app/getting-started/common-patterns/#programmatically-showing-and-hiding-components

[habaieba]

Hi, I can't show my dropdown menu on headerRight even with onPressIn. Button is pressed as I see my test log, and the button response seems to tell that dropdown is actually showing somewhere (react dev tools shows menu components). Maybe it's showing outside screen... Do you have a clue ?

import { Stack, useLocalSearchParams } from "expo-router";
import HeaderMenu from "~/components/HeaderMenu";

import WorkDetailsScreen from "~/screens/WorkDetailsScreen";

export default function Screen() {
  const { id: estimateId, workId } = useLocalSearchParams<{
    id: string;
    workId: string;
  }>();

  return (
    <>
      <Stack.Screen
        options={{
          title: "Édition de la rubrique",
          headerRight: () => <HeaderMenu />,
        }}
      />
      <WorkDetailsScreen estimateId={estimateId} workId={workId} />
    </>
  );
}

HeaderMenu

import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import { Text } from "~/components/ui/text";
import { CircleEllipsis } from "~/lib/icons/CircleEllipsis";

export default function HeaderMenu() {
  const insets = useSafeAreaInsets();
  const contentInsets = {
    top: insets.top,
    bottom: insets.bottom,
    left: 12,
    right: 12,
  };
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          size={"icon"}
          variant={"ghost"}
          onPress={() => console.log("test")}
        >
          <CircleEllipsis className="text-foreground" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent insets={contentInsets} className="w-64 native:w-72">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <Text>GitHub</Text>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Text>Support</Text>
        </DropdownMenuItem>
        <DropdownMenuItem disabled>
          <Text>API</Text>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

[kevin-griley]

It is working it just offscreen by the screen height. It does seem like a bug, I fixed it by manually setting the position of the ContentMenu for native.

<DropdownMenuContent
    insets={contentInsets}
    className="w-64 native:w-72"
    style={{
        position:
            Platform.OS !== 'web' ? 'absolute' : undefined,
        top:
            Platform.OS !== 'web' ? insets.top + 35 : undefined,
    }}
>

[mrzachnugent]

Closing due to not being a React Native Reusables issue. See https://github.com/expo/expo/issues/29489