Drawer headerRight button also opens in the headerLeft.

[John-CFO]

Current behavior

Hi guys,

I try to implement the react-native-material-menu library in the react-navigation v6 drawer header.
The problem is, that the menu open in the headerRight (as I expect) and also in the headerLeft.
I don´t now is it a react-native-material-menu error ore a react-navigation v6 error.
I posted the same issue in the material-menu repository 2 weeks ago, but I have not become an aswer yet.

Any idea how to fix it?

Menu_bug.mp4

My depedencies are the current as:

"dependencies": {
"@react-navigation/drawer": "^6.6.6",
"@react-navigation/native": "^6.1.9",
"@react-navigation/stack": "^6.3.20",
"expo": "^50.0.7",
"expo-status-bar": "~1.11.1",
"react": "18.2.0",
"react-native": "^0.73.4",
"react-native-gesture-handler": "^2.14.1",
"react-native-material-menu": "^2.0.0",
"react-native-reanimated": "^3.6.2",
"react-native-safe-area-context": "^4.8.2",
"react-native-screens": "^3.29.0"
}

//MaterialMenu.tsx

interface`` HelpMenuProps { onClose: () => void; }

const HelpMenu: React.FC<HelpMenuProps> = ({ onClose }) => {
  const closeMenu = () => {
    onClose(); };

  return (
        <TouchableOpacity onPress={closeMenu}>
          <MaterialCommunityIcons name="close-circle" size={38} color="white" />
        </TouchableOpacity> );


//App.tsx

 import { Menu } from "react-native-material-menu";
 import MaterialMenu from "./components/MaterialMenu";

 const AppDrawerNavigator = () => {
  const [isMenuVisible, setMenuVisible] = useState(false);

  const showMenu = () => setMenuVisible(true);
  const hideMenu = () => setMenuVisible(false);

  const menuComponent = (
    <Menu
      visible={isMenuVisible}
      anchor={
        <TouchableOpacity onPress={showMenu} style={{ marginRight: 10 }}>
          <MaterialIcons name="live-help" size={36} color="black" />
        </TouchableOpacity>
      }
      onRequestClose={hideMenu} 
      >
      <MaterialMenu onClose={hideMenu} />
    </Menu>
  );

  return (
    <Drawer.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerTitleAlign: "center",
        drawerStyle: {
          width: 280, },
        /*--Help-Button--*/
        headerRight: () => (
          <React.Fragment key={"menu"}>{menuComponent}</React.Fragment>
        ),
      }}
    >
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Notification" component={NotificationScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
       );
}; 


### Expected behavior

Any idea how to fix it?

### Reproduction

https://github.com/John-CFO/DrawerExample

### Platform

- [X] Android
- [X] iOS
- [ ] Web
- [ ] Windows
- [ ] MacOS

### Packages

- [ ] @react-navigation/bottom-tabs
- [X] @react-navigation/drawer
- [ ] @react-navigation/material-top-tabs
- [ ] @react-navigation/stack
- [ ] @react-navigation/native-stack
- [ ] react-native-tab-view

### Environment

"dependencies": {
    "@react-navigation/drawer": "^6.6.6",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    "expo": "^50.0.7",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "^0.73.4",
    "react-native-gesture-handler": "^2.14.1",
    "react-native-material-menu": "^2.0.0",
    "react-native-reanimated": "^3.6.2",
    "react-native-safe-area-context": "^4.8.2",
    "react-native-screens": "^3.29.0"
  }

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/drawer (found: 6.6.6, latest: 6.6.11)
• @react-navigation/native (found: 6.1.9, latest: 6.1.14)
• @react-navigation/stack (found: 6.3.20, latest: 6.3.25)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[John-CFO]

I updated the dependencies to the latest versions, but the bug is still there.

[John-CFO]

For everybody who has the same issue. I have a solution. Now I use a custom dropdown menu.

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const CustomHelpModal = ({ navigation }: { navigation: any }) => {
const [isHelpMenuVisible, setHelpMenuVisible] = useState(false);

const openDropdown = () => {
console.log("Dropdown öffnen");
setHelpMenuVisible(true);
};

const closeDropdown = () => {
console.log("Dropdown schließen");
setHelpMenuVisible(false);
};

return (

<Item
title="Help"
iconName="help-circle-outline"
onPress={openDropdown as any}
/>
<View style={{ marginRight: 10 }}>
{isHelpMenuVisible && (
<View style={{ position: "absolute", right: 0 }}>


)}


);
};

const AppDrawerNavigator = () => {
return (
<Drawer.Navigator
initialRouteName="Home"
screenOptions={{
headerTitleAlign: "center",
drawerStyle: {
width: 280,
},

    /*--Help-Button--*/
    headerRight: () => <CustomHelpModal navigation={undefined} />,
  }}
>
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="Notification" component={NotificationScreen} />
  <Drawer.Screen name="Profile" component={ProfileScreen} />
</Drawer.Navigator>

);
};
const App = () => {
return (


<Stack.Navigator>
<Stack.Screen
name="Inside"
component={AppDrawerNavigator}
options={{ headerShown: false }}
/>
<Stack.Screen name="Onboarding" component={OnboardingScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>


);
};

export default App;

good luck 🍀