fix(react-native-host): wire dev menu on macOS Fabric root views#4114
Draft
Saadnajmi wants to merge 1 commit intomicrosoft:mainfrom
Draft
fix(react-native-host): wire dev menu on macOS Fabric root views#4114Saadnajmi wants to merge 1 commit intomicrosoft:mainfrom
Saadnajmi wants to merge 1 commit intomicrosoft:mainfrom
Conversation
The Fabric root view returned by `viewWithModuleName:initialProperties:` does not show the dev menu on right-click on macOS, because: 1. On react-native-macos 0.81+, `RCTSurfaceHostingView.menuForEvent:` relies on a `devMenu` property that is normally set by `RCTRootViewFactory`, which consumers of this host bypass. 2. On earlier versions, the Fabric root view does not override `menuForEvent:` at all. After creating the Fabric root view, mirror what `RCTRootViewFactory` does on 0.81+ by setting `devMenu` via the `setDevMenu:` selector when available. For older versions, install an `NSClickGestureRecognizer` with the secondary-button mask whose action fetches `RCTDevMenu` via `-usingModule:block:` and pops up `[devMenu menu]` directly. Both paths are guarded by `RCT_DEV_MENU` and `__has_include (<React/RCTDevMenu.h>)` so non-dev builds and platforms without the dev menu compile out the wiring entirely. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
On macOS new architecture, right-clicking the React content of an app that uses
host.viewWithModuleName:initialProperties:does nothing — the dev menu never appears. The reasons:RCTSurfaceHostingViewdoes overridemenuForEvent:, but it returns[_devMenu menu]and_devMenuis wired byRCTRootViewFactory— a code path consumers of this host bypass.RCTSurfaceHostingProxyRootView/RCTSurfaceHostingView) does not overridemenuForEvent:at all.After creating the Fabric root view, this PR:
[rootView respondsToSelector:@selector(setDevMenu:)], then resolvesRCTDevMenuvia-usingModule:block:and assigns it viaperformSelector:. This mirrors whatRCTRootViewFactory.mmdoes upstream.NSClickGestureRecognizerwithbuttonMask = 1 << 1whose action fetchesRCTDevMenuand calls[NSMenu popUpContextMenu:withEvent:forView:]with[devMenu menu].Both paths are gated by:
so iOS and release builds compile the wiring out entirely. The use of
respondsToSelector:+performSelector:(rather than importing<React/RCTSurfaceHostingView.h>and casting) keeps the file compiling against react-native-macos versions that don't have thedevMenuproperty in their public headers.Relationship to microsoft/react-native-test-app#2757
This is the proper, upstream-aligned fix of a pair. microsoft/react-native-test-app#2757 is a self-contained workaround landed in the test app while this change makes its way through review and into a release; once this ships and the test app picks up the new
@rnx-kit/react-native-host, that workaround can be removed.The two surface different menus on secondary-click:
RCTRootViewand as iOS.Any consumer of
host.viewWithModuleName:benefits from this PR — not just the test app — which is why it belongs here in the host rather than papered over in each app.Test plan
setDevMenu:) — fallback gesture-recognizer path is exercised; right-click the React content shows the dev menu.setDevMenu:) — property-wiring path is exercised; right-click shows the dev menu.RNX_WIRE_DEV_MENUblock is gated byTARGET_OS_OSX, no behavior change.RCT_DEV_MENUis 0, the entire block is compiled out.🤖 Generated with Claude Code