react-nativemenufrontendgluestack

Opening a Modal from a Menu in GlueStack

I'm working on a project using GlueStack, and I'm trying to implement a functionality where clicking on a menu item should open a modal. I've looked into the documentation, but I couldn't find a clear example or guidance on how to achieve this.

I tried this but is not working.

  onClick: () => void;
}

const MenuConten: React.FC<ButtonProps> = ({ onClick }) => {
  return (
    <DesMenu>
      <MenuItem onPress={onClick}>
        <Icon as={Pencil} size="sm" mr="$2" />
        <MenuItemLabel size="sm" onPress={onClick}>
          Editar
        </MenuItemLabel>
      </MenuItem>
      <MenuItem>
        <Icon as={Trash2} size="sm" mr="$2" color="red" />
        <MenuItemLabel size="sm" color="red">
          Eliminar
        </MenuItemLabel>
      </MenuItem>
    </DesMenu>
  );
};

export default MenuConten;````

I need each option of the menu to open a different modal.

Could someone please provide a step-by-step guide or code snippet on how to open a modal from a menu in GlueStack? Any insights or examples would be greatly appreciated. Thank you!
Solution

  • You can use the prop selectionMode="single" and onSelectionChange callback to open modal. Below is an example of the same.

    https://snack.expo.dev/@sacontrack/multiple-modal.