Context Menus

Proposal: Add context menus to RNWCPP

Summary

Context menus give users access to additional functionality related to onscreen items without cluttering the interface. React Native does not provide a component to display any kind of menus. The need to display contextual commands is common for many apps.

Unlike many UI components visible on apps' primary surfaces, context menus are supporting UI that appears temporarily. For that reason, I believe users expect context menus to have consistent look & feel across the entire OS rather than showing the unique branding of each app where context menus are used.

There are two primary questions that we need to address:

1. How will the context menu be attached to its parent component, triggered through user action, and positioned once it appears?
2. Will the context menu content be represented using a wrapped native control and if so, which one?

Motivation

Menus

Windows (proposed)

Windows (current)

iOS

Android

Edit menus

Text input fields have context menus that are visually and functionally distinct from general-purpose menus.

Windows (proposed)

Windows (current)

iOS

Android

Note: RN's TextInput component includes a contextMenuHidden prop. I have not yet verified, but to me this implies that TextInput will show a native context menu for common commands like Copy/Paste.

Proposal

RNW should wrap native Xaml controls to show context menus on Windows.

Pri 1

• CommandBarFlyout
• AppBarButton
• MenuFlyout
• MenuFlyoutItem

Pri 2

• MenuFlyoutSubItem
• AppBarSeparator

Pri 3

• AppBarElementContainer
• AppBarToggleButton
• MenuFlyoutSeparator
• ToggleMenuFlyoutItem
• RadioMenuFlyoutItem

Menu invocation

Windows users can invoke context menus using these "context actions":

Input	Context action
Mouse	Right click
Keyboard	Shift+F10, Menu button
Touch	Long press on item
Pen	Barrel button press, long press on item
Gamepad	Menu button

Xaml's ContextFlyout property and ContextRequested event encapsulate all these context actions and trigger whenever users perform one of these actions.

Basic example

Open Questions

1. What's the correct way of associating a context menu with the UI component from which it's invoked?
   • One proposal is to attach the context menu to its parent component, RNW should expose the attachAsContextFlyout prop for the wrapped CommandBarFlyout and MenuFlyout components.
   • Another alternative is to provide a MenuTrigger component similar to the approach used by instea/react-native-popup-menu
   • Resolved: Add a View props event similar to HTML's oncontextmenu