I wanted to use zeego for dropdown menus but since it lacks certain functioning in android I decided to drop the idea as I am developing an app primarily focussing on android. So I decided to make my own menu. This menu is present inside a ScreenHeader component that gets rendered as a header for a screen like below

<Stack.Screen
        options={{
          header: () => (
            <ScreenHeader
              title={
                typeof passwordTitle === "string" ? passwordTitle : "Password"
              }
              isDropDownMenuVisible={true}
              isBackBtnVisible={true}
              dropDownMenuList={DROPDOWN_MENU}
            />
          ),
        }}
      />

ScreenHeader.tsx

  <View className={`flex-row h-[70px] items-center bg-black-200  px-3`}>
     // other code
      {isDropDownMenuVisible && <Menu buttons={dropDownMenuList} />}
    </View>

and the Menu component looks like this

const Menu = ({ buttons }: { buttons: PropsType[] }) => {
  const [menuVisible, setMenuVisible] = useState(false);
    // some reanimate code

 
  return (
    <View className="relative">
      <TouchableOpacity
        className="p-1 flex-row items-center justify-center"
        activeOpacity={0.7}
        onPress={toggleMenu}
      >
        <Ionicons name="ellipsis-vertical" size={24} color="#F5F5F5" />
      </TouchableOpacity>

      {menuVisible && (
        <Animated.View
          style={[animatedStyle]}
          className="flex-col z-20 absolute rounded-md w-40 top-10 right-4 bg-[#2C2C2C] shadow-2xl"
        >
          {buttons.map((item) => (
            <TouchableOpacity
              key={item.title}
              className="flex-row items-center space-x-4 p-4"
              activeOpacity={0.7}
            >
              {item.icon}
              <Text
                className={`${
                  item.type === "danger" ? "text-[#FF0000]" : "text-white-200"
                } text-2xl font-patrg`}
              >
                {item.title}
              </Text>
            </TouchableOpacity>
          ))}
        </Animated.View>
      )}
    </View>
  );
};

The toggling of the menu works as normal when the user click on the three dots. But now I want the user to be able to close the menu when he clicks anywhere outside the menu which is a usual feature in all apps. But since I am new to react native I have no idea how to do it. I looked up in chat gpt which suggested to me to use a Modal and touchablewithoutfeedback combination to do it but I do not think that this is how detecting touches outside the menu works in professional apps or UI librararies. Moreover using a Modal also messes up the positioning of the menu relative to the button.

So can anyone please suggest me how can I detect touches outside the menu to close it.