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/