Are React Native macOS menu bar apps possible?

Question

Is there any way to currently create a React Native app that runs in the background within the macOS menu bar?

Answer 1

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/

Answer 2

As of now, the best way to do this is using the Electron platform.