Are React Native macOS menu bar apps possible?

The question is not recent, but I found it searching for this topic and there is a recent relevant update: with the new desktop efforts from Microsoft, this is now feasible, although still tricky.

Credits to ospfranco for the great work.

---

The only way to do it is by editing your AppDelegate class and initialize the status button label and its popover content with the Root View content from the React Native application. It's also possible to customize its size, appearance and the button at the bar, but only in Swift code.

func applicationDidFinishLaunching(_ aNotification: Notification) {
    let jsCodeLocation: URL

    jsCodeLocation = RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index", fallbackResource:nil)
    let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "tempomat", initialProperties: nil, launchOptions: nil)
    let rootViewController = NSViewController()
    rootViewController.view = rootView

    popover = NSPopover()

    popover.contentSize = NSSize(width: 700, height: 800)
    popover.animates = true
    popover.behavior = .transient
    popover.contentViewController = rootViewController

    statusBarItem = NSStatusBar.system.statusItem(withLength: CGFloat(60))

    if let button = self.statusBarItem.button {
        button.action = #selector(togglePopover(_:))
      button.title = "Tempomat"
    }

  }

References:

• React Native MacOS (Microsoft): https://github.com/microsoft/react-native-macos

• Sample code: https://github.com/ospfranco/react-native-macos-menubar-template

• Blog post: https://ospfranco.github.io/post/2020/05/23/how-to-make-a-react-native-menu-bar-app-for-mac-os/