fix(macos): convert `Main.storyboard` using programmatic AppKit APIs by tido64 · Pull Request #2836 · microsoft/react-native-test-app

Tommy Nguyen (tido64) · 2026-07-03T11:51:12Z

Description

Resolves#111.

Platforms affected

Test plan

cd packages/example-macos/
pod install --project-directory=macos
yarn macos
# In a separate terminal
yarn start

Screenshots

More below…

Tommy Nguyen (tido64)

Main menu screenshots 👇

Tommy Nguyen (tido64) · 2026-07-03T11:51:47Z

+ return NSMenuItem(submenu: title, items: [
+ NSMenuItem(title: "About \(title)", action: #selector(NSApplication.orderFrontStandardAboutPanel(_:))),
+ .separator(),
+ NSMenuItem(title: "Preferences…", keyEquivalent: ","),
+ .separator(),
+ NSMenuItem(submenu: servicesMenu),
+ .separator(),
+ NSMenuItem(title: "Hide \(title)", action: #selector(NSApplication.hide(_:)), keyEquivalent: "h"),
+ NSMenuItem(
+ title: "Hide Others",
+ action: #selector(NSApplication.hideOtherApplications(_:)),
+ keyEquivalent: "h",
+ keyEquivalentModifierMask: [.option, .command]
+ ),
+ NSMenuItem(title: "Show All", action: #selector(NSApplication.unhideAllApplications(_:))),
+ .separator(),
+ NSMenuItem(title: "Quit \(title)", action: #selector(NSApplication.terminate(_:)), keyEquivalent: "q"),
+ ])


Tommy Nguyen (tido64) · 2026-07-03T11:52:05Z

+ NSMenuItem(submenu: "File", items: [
+ NSMenuItem(title: "New", action: #selector(NSDocumentController.newDocument(_:)), keyEquivalent: "n"),
+ NSMenuItem(title: "Open…", action: #selector(NSDocumentController.openDocument(_:)), keyEquivalent: "o"),
+ NSMenuItem(submenu: "Open Recent", items: [
+ NSMenuItem(title: "Clear Menu", action: #selector(NSDocumentController.clearRecentDocuments(_:))),
+ ]),
+ .separator(),
+ NSMenuItem(title: "Close", action: #selector(NSWindow.performClose(_:)), keyEquivalent: "w"),
+ NSMenuItem(title: "Save…", action: #selector(NSDocument.save(_:)), keyEquivalent: "s"),
+ NSMenuItem(title: "Save As…", action: #selector(NSDocument.saveAs(_:)), keyEquivalent: "S"),
+ NSMenuItem(title: "Revert to Saved", action: #selector(NSDocument.revertToSaved(_:)), keyEquivalent: "r"),
+ .separator(),
+ NSMenuItem(
+ title: "Page Setup…",
+ action: #selector(NSDocument.runPageLayout(_:)),
+ keyEquivalent: "P",
+ keyEquivalentModifierMask: [.shift, .command]
+ ),
+ NSMenuItem(title: "Print…", action: #selector(NSView.printView(_:)), keyEquivalent: "p"),
+ ])


Tommy Nguyen (tido64) · 2026-07-03T11:52:29Z

+ NSMenuItem(submenu: "Edit", items: [
+ NSMenuItem(title: "Undo", action: Selector(("undo:")), keyEquivalent: "z"),
+ NSMenuItem(title: "Redo", action: Selector(("redo:")), keyEquivalent: "Z"),
+ .separator(),
+ NSMenuItem(title: "Cut", action: #selector(NSText.cut(_:)), keyEquivalent: "x"),
+ NSMenuItem(title: "Copy", action: #selector(NSText.copy(_:)), keyEquivalent: "c"),
+ NSMenuItem(title: "Paste", action: #selector(NSText.paste(_:)), keyEquivalent: "v"),
+ NSMenuItem(
+ title: "Paste and Match Style",
+ action: #selector(NSTextView.pasteAsPlainText(_:)),
+ keyEquivalent: "V",
+ keyEquivalentModifierMask: [.option, .command]
+ ),
+ NSMenuItem(title: "Delete", action: #selector(NSText.delete(_:))),
+ NSMenuItem(title: "Select All", action: #selector(NSText.selectAll(_:)), keyEquivalent: "a"),
+ .separator(),
+ NSMenuItem(submenu: "Find", items: [
+ NSMenuItem(
+ title: "Find…",
+ action: #selector(NSTextView.performFindPanelAction(_:)),
+ keyEquivalent: "f",
+ tag: 1
+ ),
+ NSMenuItem(
+ title: "Find and Replace…",
+ action: #selector(NSTextView.performFindPanelAction(_:)),
+ keyEquivalent: "f",
+ keyEquivalentModifierMask: [.option, .command],
+ tag: 12
+ ),
+ NSMenuItem(
+ title: "Find Next",
+ action: #selector(NSTextView.performFindPanelAction(_:)),
+ keyEquivalent: "g",
+ tag: 2
+ ),
+ NSMenuItem(
+ title: "Find Previous",
+ action: #selector(NSTextView.performFindPanelAction(_:)),
+ keyEquivalent: "G",
+ tag: 3
+ ),
+ NSMenuItem(
+ title: "Use Selection for Find",
+ action: #selector(NSTextView.performFindPanelAction(_:)),
+ keyEquivalent: "e",
+ tag: 7
+ ),
+ NSMenuItem(
+ title: "Jump to Selection",
+ action: #selector(NSTextView.centerSelectionInVisibleArea(_:)),
+ keyEquivalent: "j"
+ ),
+ ]),
+ NSMenuItem(submenu: "Spelling and Grammar", items: [
+ NSMenuItem(
+ title: "Show Spelling and Grammar",
+ action: #selector(NSText.showGuessPanel(_:)),
+ keyEquivalent: ":"
+ ),
+ NSMenuItem(
+ title: "Check Document Now",
+ action: #selector(NSText.checkSpelling(_:)),
+ keyEquivalent: ";"
+ ),
+ .separator(),
+ NSMenuItem(
+ title: "Check Spelling While Typing",
+ action: #selector(NSTextView.toggleContinuousSpellChecking(_:))
+ ),
+ NSMenuItem(
+ title: "Check Grammar With Spelling",
+ action: #selector(NSTextView.toggleGrammarChecking(_:))
+ ),
+ NSMenuItem(
+ title: "Correct Spelling Automatically",
+ action: #selector(NSTextView.toggleAutomaticSpellingCorrection(_:))
+ ),
+ ]),
+ NSMenuItem(submenu: "Substitutions", items: [
+ NSMenuItem(
+ title: "Show Substitutions",
+ action: #selector(NSTextView.orderFrontSubstitutionsPanel(_:))
+ ),
+ .separator(),
+ NSMenuItem(
+ title: "Smart Copy/Paste",
+ action: #selector(NSTextView.toggleSmartInsertDelete(_:))
+ ),
+ NSMenuItem(
+ title: "Smart Quotes",
+ action: #selector(NSTextView.toggleAutomaticQuoteSubstitution(_:))
+ ),
+ NSMenuItem(
+ title: "Smart Dashes",
+ action: #selector(NSTextView.toggleAutomaticDashSubstitution(_:))
+ ),
+ NSMenuItem(
+ title: "Smart Links",
+ action: #selector(NSTextView.toggleAutomaticLinkDetection(_:))
+ ),
+ NSMenuItem(
+ title: "Data Detectors",
+ action: #selector(NSTextView.toggleAutomaticDataDetection(_:))
+ ),
+ NSMenuItem(
+ title: "Text Replacement",
+ action: #selector(NSTextView.toggleAutomaticTextReplacement(_:))
+ ),
+ ]),
+ NSMenuItem(submenu: "Transformations", items: [
+ NSMenuItem(title: "Make Upper Case", action: #selector(NSTextView.uppercaseWord(_:))),
+ NSMenuItem(title: "Make Lower Case", action: #selector(NSTextView.lowercaseWord(_:))),
+ NSMenuItem(title: "Capitalize", action: #selector(NSTextView.capitalizeWord(_:))),
+ ]),
+ NSMenuItem(submenu: "Speech", items: [
+ NSMenuItem(title: "Start Speaking", action: #selector(NSTextView.startSpeaking(_:))),
+ NSMenuItem(title: "Stop Speaking", action: #selector(NSTextView.stopSpeaking(_:))),
+ ]),
+ ])


Tommy Nguyen (tido64) · 2026-07-03T11:52:45Z

+ NSMenuItem(submenu: "View", items: [
+ NSMenuItem(
+ title: "Show Toolbar",
+ action: #selector(NSWindow.toggleToolbarShown(_:)),
+ keyEquivalent: "t",
+ keyEquivalentModifierMask: [.option, .command]
+ ),
+ NSMenuItem(
+ title: "Customize Toolbar…",
+ action: #selector(NSWindow.runToolbarCustomizationPalette(_:))
+ ),
+ .separator(),
+ NSMenuItem(
+ title: "Show Sidebar",
+ action: #selector(NSSplitViewController.toggleSidebar(_:)),
+ keyEquivalent: "s",
+ keyEquivalentModifierMask: [.control, .command]
+ ),
+ NSMenuItem(
+ title: "Enter Full Screen",
+ action: #selector(NSWindow.toggleFullScreen(_:)),
+ keyEquivalent: "f",
+ keyEquivalentModifierMask: [.control, .command]
+ ),
+ ])


Tommy Nguyen (tido64) · 2026-07-03T11:53:13Z

+ let rememberLastComponentMenuItem = NSMenuItem(
+ title: "Remember Last Opened Component",
+ action: #selector(onRememberLastComponentSelected(_:)),
+ target: self
+ )
+ rememberLastComponentMenuItem.isEnabled = false
+ self.rememberLastComponentMenuItem = rememberLastComponentMenuItem
+
+ let reactMenu = NSMenu(title: "React", items: [
+ NSMenuItem(
+ title: "Load Embedded JS Bundle",
+ action: #selector(onLoadEmbeddedBundleSelected(_:)),
+ target: self
+ ),
+ NSMenuItem(
+ title: "Load From Dev Server",
+ action: #selector(onLoadFromDevServerSelected(_:)),
+ target: self
+ ),
+ rememberLastComponentMenuItem,
+ .separator(),
+ ])
+ reactMenu.autoenablesItems = false
+ self.reactMenu = reactMenu
+
+ let reactMenuItem = NSMenuItem(submenu: reactMenu)
+ reactMenuItem.isHidden = true
+ return reactMenuItem


Tommy Nguyen (tido64) · 2026-07-03T11:55:16Z

+ let windowMenu = NSMenu(title: "Window", items: [
+ NSMenuItem(title: "Minimize", action: #selector(NSWindow.performMiniaturize(_:)), keyEquivalent: "m"),
+ NSMenuItem(title: "Zoom", action: #selector(NSWindow.performZoom(_:))),
+ .separator(),
+ NSMenuItem(title: "Bring All to Front", action: #selector(NSApplication.arrangeInFront(_:))),
+ ])
+
+ NSApp.windowsMenu = windowMenu
+
+ return NSMenuItem(submenu: windowMenu)


Tommy Nguyen (tido64) · 2026-07-03T11:55:29Z

+ let helpMenu = NSMenu(title: "Help", items: [
+ NSMenuItem(title: "\(title) Help", action: #selector(NSApplication.showHelp(_:)), keyEquivalent: "?"),
+ ])
+
+ NSApp.helpMenu = helpMenu
+
+ return NSMenuItem(submenu: helpMenu)


Saad Najmi (Saadnajmi) · 2026-07-03T15:10:47Z

I think I have a WIP in RNM where I changed the remote to SwiftUI with much of the same fratutes. I can dig it up?

Tommy Nguyen (tido64) · 2026-07-06T07:28:03Z

I think I have a WIP in RNM where I changed the remote to SwiftUI with much of the same fratutes. I can dig it up?

What are "much of the same features"? And how much code is there? We have hooks in the AppDelegate that we need to keep for config-plugins but besides that, most of the code is just 1:1 converting the menu bar from the storyboard (that we probably should trim down). There aren't much to maintain so to speak.

@main

Replace the programmatic AppKit menu bar (added in microsoft#2836) with the SwiftUI App lifecycle. SwiftUI provides the standard App/File/Edit/View/Window/Help menus for free, so the ~320 lines of makeMainMenu/make*MenuItem in WindowController.swift are deleted. The dynamic "React" menu is now declarative: ReactCommands renders a CommandMenu("React") driven by an observable AppModel. Publishing components/componentsEnabled/rememberLastComponent rebuilds the menu, so the manual NSMenuItem add/remove bookkeeping is gone. An AppDelegate is kept via @NSApplicationDelegateAdaptor for RN setup and lifecycle notifications. - AppDelegate.swift: @main App struct + adaptor + AppModel - ReactCommands.swift: dynamic React menu (Cmd-Shift-1..9 component shortcuts) - ViewController.swift: SwiftUI content hosting + placeholder - WindowController.swift: deleted - project.pbxproj / pack.test.mts: swap WindowController.swift for ReactCommands.swift Both ENABLE_SINGLE_APP_MODE and multi-app behavior are preserved. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

@main

Replace the programmatic AppKit menu bar (added in microsoft#2836) with the SwiftUI App lifecycle. SwiftUI provides the standard App/File/Edit/View/Window/Help menus for free, so the ~320 lines of makeMainMenu/make*MenuItem in WindowController.swift are deleted. The dynamic "React" menu is now declarative: ReactCommands renders a CommandMenu("React") driven by an observable AppModel. Publishing components/componentsEnabled/rememberLastComponent rebuilds the menu, so the manual NSMenuItem add/remove bookkeeping is gone. An AppDelegate is kept via @NSApplicationDelegateAdaptor for RN setup and lifecycle notifications. - AppDelegate.swift: @main App struct + adaptor + AppModel - ReactCommands.swift: dynamic React menu (Cmd-Shift-1..9 component shortcuts) - ViewController.swift: SwiftUI content hosting + placeholder - WindowController.swift: deleted - project.pbxproj / pack.test.mts: swap WindowController.swift for ReactCommands.swift Both ENABLE_SINGLE_APP_MODE and multi-app behavior are preserved. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

@main

Replace the programmatic AppKit menu bar (added in microsoft#2836) with the SwiftUI App lifecycle. SwiftUI provides the standard App/File/Edit/View/Window/Help menus for free, so the ~320 lines of makeMainMenu/make*MenuItem in WindowController.swift are deleted. The dynamic "React" menu is now declarative: ReactCommands renders a CommandMenu("React") driven by an observable AppModel. Publishing components/componentsEnabled/rememberLastComponent rebuilds the menu, so the manual NSMenuItem add/remove bookkeeping is gone. An AppDelegate is kept via @NSApplicationDelegateAdaptor for RN setup and lifecycle notifications. - AppDelegate.swift: @main App struct + adaptor + AppModel - ReactCommands.swift: dynamic React menu (Cmd-Shift-1..9 component shortcuts) - ViewController.swift: SwiftUI content hosting + placeholder - WindowController.swift: deleted - project.pbxproj / pack.test.mts: swap WindowController.swift for ReactCommands.swift Both ENABLE_SINGLE_APP_MODE and multi-app behavior are preserved. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actionsBot added platform: iOS This affects iOS platform: macOS This affects macOS platform: visionOS labels Jul 3, 2026

Tommy Nguyen (tido64) commented Jul 3, 2026
View reviewed changes

Tommy Nguyen (tido64)force-pushed the tido/replace-storyboard branch 2 times, most recently from 2298886 to c761fd2Compare July 3, 2026 13:03

fix(macos): convert Main.storyboard using programmatic AppKit APIs
ff0b9a8

Tommy Nguyen (tido64)force-pushed the tido/replace-storyboard branch from c761fd2 to ff0b9a8Compare July 6, 2026 10:05

Tommy Nguyen (tido64) marked this pull request as ready for review July 6, 2026 10:13

Tommy Nguyen (tido64) requested review from Jason Morse (JasonVMo) and Saad Najmi (Saadnajmi) as code owners July 6, 2026 10:13

Saad Najmi (Saadnajmi) approved these changes Jul 7, 2026
View reviewed changes

Tommy Nguyen (tido64) merged commit 9057a4f into trunkJul 7, 2026
23 checks passed

Tommy Nguyen (tido64) deleted the tido/replace-storyboard branch July 7, 2026 10:17

Saad Najmi (Saadnajmi) mentioned this pull request Jul 7, 2026
feat(apple): shared SwiftUI menu + AppModel across iOS, macOS, and visionOS #2842
Draft

Navigation Menu

Uh oh!

fix(macos): convert `Main.storyboard` using programmatic AppKit APIs - #2836

fix(macos): convert `Main.storyboard` using programmatic AppKit APIs#2836
Tommy Nguyen (tido64) merged 1 commit into
trunkfrom
tido/replace-storyboard

Tommy Nguyen (tido64) commented Jul 3, 2026•
edited
Loading

Uh oh!

Tommy Nguyen (tido64) left a comment •
edited
Loading

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Uh oh!

Saad Najmi (Saadnajmi) commented Jul 3, 2026

Uh oh!

Tommy Nguyen (tido64) commented Jul 6, 2026•
edited
Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Tommy Nguyen (tido64) commented Jul 3, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Platforms affected

Test plan

Screenshots

Uh oh!

Tommy Nguyen (tido64) left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Choose a reason for hiding this comment

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Choose a reason for hiding this comment

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Choose a reason for hiding this comment

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Choose a reason for hiding this comment

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Choose a reason for hiding this comment

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Choose a reason for hiding this comment

Uh oh!

Tommy Nguyen (tido64)Jul 3, 2026

Choose a reason for hiding this comment

Uh oh!

Saad Najmi (Saadnajmi) commented Jul 3, 2026

Uh oh!

Tommy Nguyen (tido64) commented Jul 6, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Tommy Nguyen (tido64) commented Jul 3, 2026•
edited
Loading

Tommy Nguyen (tido64) left a comment •
edited
Loading

Tommy Nguyen (tido64) commented Jul 6, 2026•
edited
Loading