Right click context menu about react-native-macos HOT 5 OPEN

@AdrianFahrbach there's another option you could use for a native NSmenu: ActionSheetIOS. We actually ported that to fire an NSMenu. I found an old internal component that gives you an idea of how it could work:

'use strict';
import * as React from 'react';
import { findNodeHandle, ActionSheetIOSOptions, ActionSheetIOS } from 'react-native';
import { IContextualMenuStatic } from '../../common/ContextualMenu/ContextualMenu.types';
import { IContextualMenuProps } from '../../common/ContextualMenu/ContextualMenu.Props';

declare module 'react-native' {
  // The TypeScript type definition at
  // https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-native
  // is missing anchor on ActionSheetIOSOptions.
  // Use declaration merging to add it here.
  interface ActionSheetIOSOptions {
    anchor?: number;
  }
}

class ContextualMenuImpl extends React.Component<IContextualMenuProps, {}> {
  public static showContextualMenu(menu: IContextualMenuProps, target: React.ReactNode) {
    const buttonTitles: Array<string> = [];

    for (const button of menu.items) {
      buttonTitles.push(button.name);
    }

    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
    const reactTag = findNodeHandle(target as any);
    const options: ActionSheetIOSOptions = {
      options: buttonTitles,
      cancelButtonIndex: menu.cancelButtonIndex,
      destructiveButtonIndex: menu.destructiveButtonIndex,
      anchor: reactTag
    };

    ActionSheetIOS.showActionSheetWithOptions(options, buttonIndex => {
      menu.items[buttonIndex].onClick({ key: menu.items[buttonIndex].key });
    });
  }
}

export const ContextualMenu: IContextualMenuStatic = ContextualMenuImpl;

Note that while findNodeHandle works in Fabric, it's not recommended, and we're still looking for a good alternative.

from react-native-macos.

I've been meaning to add support for macOS to https://github.com/react-native-menu/menu but haven't gotten around to it.
Meanwhile, I ended up writing a fully custom replacement for NSMenu with FluentUI React Native Menu. That one had to be fully custom (A custom NSWindow holding RN Views instead of just rendering a native NSMenu) because we wanted more customizable menu items (I.E, you can put any view in there instead of just text). That might be worth checking out. The spec page I linked doesn't have macOS screenshots but I encourage you to try the test app out

from react-native-macos.

I think when I've thought about this before, I've resisted the approach of just adding props to <View> because menus can get secretly complex when you add in images, checkboxes, multi-select, submenus, etc. Ultimately I think a "wrapper "component (like @react-native-menu/menu) or a component that lets you write up the menu in JSX (like FluentUI React Native's Menu) is the better extensible approach.

from react-native-macos.

I tried the FluentUI React Native Menu and can't get it to work. I also tested this on windows and force opening the menu with <Menu open> but it just doesn't show up. Maybe the theme provider is mandatory?

Ultimately I think a "wrapper "component (like @react-native-menu/menu) or a component that lets you write up the menu in JSX (like FluentUI React Native's Menu) is the better extensible approach.

My initial thought was a separate library as well, so I was actually looking for something like your FluentUI menu.
What I really like about the View prop approach though is its simplicity. I didn't test it, but it sounds like that way I also don't have to worry about making it feel 100% native and/or placing the popup in the right location. I also don't need to handle the open/close state or nest multiple components, I can just throw an object into that prop.
I'm going for a very native look & feel though, so in my case I don't want to place any custom views inside my menu.

from react-native-macos.