I have a functional component Profile.js and on the header of that screen I put a button. Once this button is pressed I want to display a dropdown menu from react-native-material-menu

Part of my Profile.js:

function Profile(props) {

  useLayoutEffect(() => { 
          props.navigation.setOptions({
            headerRight: () => <HeaderRight />,
          });
        } 
  }, []);

My HeaderRight component:

export const HeaderRight = () => {
  return (
    <TouchableOpacity style={{ marginTop: 20, marginRight: 8 }}>
      <Feather
        name="more-vertical"
        size={24}
        color="black"
        onPress={() => renderMenu()}
      />
    </TouchableOpacity>
  );
};

As you can see when the icon is pressed I call my renderMenu(), which looks like the following:

import React, { useState } from "react";
import { View, Text } from "react-native";
import { Menu, MenuItem, MenuDivider } from "react-native-material-menu";

export const renderMenu = (props) => {
  const [visible, setVisible] = useState(true);

  const hideMenu = () => setVisible(false);

  const showMenu = () => setVisible(true);

  return (
    <View
      style={{ height: "100%", alignItems: "center", justifyContent: "center" }}
    >
      <Menu
        visible={visible}
        anchor={<Text onPress={showMenu}>Show menu</Text>}
        onRequestClose={hideMenu}
      >
        <MenuItem onPress={hideMenu}>Menu item 1</MenuItem>
        <MenuItem onPress={hideMenu}>Menu item 2</MenuItem>
        <MenuItem disabled>Disabled item</MenuItem>
        <MenuDivider />
        <MenuItem onPress={hideMenu}>Menu item 4</MenuItem>
      </Menu>
    </View>
  );
};

When I render my page, I click on the header icon and I get the following error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Can you tell me, how do I render my dropdown menu component?

CodePudding user response：

You do not render the JSX on the return of an onPress function. Try this out:

export const HeaderRight = () => {
  const [visible, setVisible] = useState(false);
  let toggle = () => setVisible(!visible);
  return (
    <>
      <TouchableOpacity style={{ marginTop: 20, marginRight: 8 }}>
        <Feather
          name="more-vertical"
          size={24}
          color="black"
          onPress={toggle}
        />
      </TouchableOpacity>
    <Menu
      visible={visible}
      anchor={<Text onPress={toggle}>Show menu</Text>}
      onRequestClose={toggle}>
        <MenuItem onPress={toggle}>Menu item 1</MenuItem>
        <MenuItem onPress={toggle}>Menu item 2</MenuItem>
        <MenuItem disabled>Disabled item</MenuItem>
        <MenuDivider />
        <MenuItem onPress={toggle}>Menu item 4</MenuItem>
      </Menu>
     </>
  );
};