Converting a React Native for macOS Application into a Menu Bar Application

 (also known as menu bar icons) of a macOS menu bar let users quickly access status information and perform actions without launching an application inside a new, separate window. For example, upon installation, a popular desktop application like 

 to the macOS menu bar for monitoring and reporting the status of uploads. With the single click of an icon/title, the status menu toggles open a condensed version of the Dropbox desktop application. You can get the latest uploads and share them immediately without having to change your active window.

Status menus helps to maximize your workflow and keep you productive. They run in the background and periodically update with new notifications and content to avoid distracting you while you are focused on completing your work. With so many 

 available, you can customize this section of the macOS menu bar and arrange the items in any order to best complement your workflow.   

However, if you cannot find a status bar application that addresses a specific  aspect of your workflow, such as aggregating and displaying relevant information about the status of jobs triggered by a CI build pipeline, then you can build your own status bar application with 

. Unlike a desktop application, building a status bar application involves quite a few steps beyond the installation steps listed in the 

Below, I'm going to show you how to convert a React Native for macOS application into a menu bar application.

To get started, let's create a new React Native for macOS project from a standard React Native template.

$ npx react-native init <projectName> --template react-native@^0.63.0
$ cd <projectName>
$ npx react-native-macos-init

Verify that the project was initialized correctly by running it:

The status bar application consists of two components: a status item and a popover. A 

 is a clickable icon/title that sits in the system menu bar. A 

 is a self-contained view that hovers over its surrounding context and displays content within a non-modal dialog. It is anchored to the element responsible for making it appear, which is indicated by the direction of its tooltip arrow. Both of these parts will be implemented in Swift.

Unlike a pull-down menu, which simply lists options, the layout of a popover's content is flexible. This content will come directly from the React application whose root component 

To transition to Swift, we must first remove the existing Objective-C code from the project. Delete the following files:

AppDelegate.h
AppDelegate.m
main.m
ViewController.h
ViewController.m

Even if you delete these files inside of Finder or within your terminal, Xcode still references these from the project navigator. Therefore, open the project inside of Xcode by either...

Then, delete those files manually from the project navigator.

Keep Xcode opened for the remainder of this tutorial.

To add a status bar item and popover into our application, let's first create two new files:

<projectname>-macOS-Bridging-Header.h
AppDelegate.swift

 must match the casing of the parent project directory's name. For example, if the project's directory name is 

$ touch <projectname>-macOS-Bridging-Header.h AppDelegate.swift

 bridging header file exposes Objective-C libraries to Swift. For this project, the specified libraries provide APIs for integrating React Native into native code and rendering the React Native application within a 

#import <React/RCTBridgeModule.h>
#import <React/RCTBridge.h>
#import <React/RCTEventDispatcher.h>
#import <React/RCTRootView.h>
#import <React/RCTUtils.h>
#import <React/RCTConvert.h>
#import <React/RCTBundleURLProvider.h>

 file serves as the application's initial entry file and defines a 

 class, which handles application lifecycle events like 

 and how the application responds to these events. 

import Foundation
import Cocoa

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {
  // ...
}

, which will reference the application's popover and status bar item respectively. An additional 

 property will be defined to reference a "development" window.

var popover: NSPopover!
var statusBarItem: NSStatusItem!
var window: NSWindow!

Once the application has launched, initialize the React Native application with 

, which displays the React Native application whose root component 

 file (development environment) or from the compiled bundle (production build). This base view is embedded within a 

let jsCodeLocation: URL

#if DEBUG
  jsCodeLocation = RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index", fallbackResource:nil)
#else
  jsCodeLocation = Bundle.main.url(forResource: "main", withExtension: "jsbundle")!
#endif
let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "<projectName>", initialProperties: nil, launchOptions: nil)
let rootViewController = NSViewController()
rootViewController.view = rootView

 is a pre-processor directive. Code inside of this directive are pre-processed before compilation. In the above code, we initialize the React Native bridge within this directive. 

Initialize the popover by setting its base dimensions to 700px by 800px and behavior to transient. Enable animation for its dismissal and emergence. Set its content to the 

 that has the React application embedded within it. 

popover = NSPopover()

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

Initialize the status bar item by allocating 60px (in width) within the macOS status bar for it. Using the 

 property, we can customize the appearance and behavior of this item. Whenever the status item is clicked, the 

 method is called. The status item will be shown in the status bar via the project's name, not a typical icon, to make this example simpler.

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

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

 dismisses the popover when its opened, and vice-versa.

@objc func togglePopover(_ sender: AnyObject?) {
  if let button = self.statusBarItem.button {
    if self.popover.isShown {
      self.popover.performClose(sender)
    } else {
      self.popover.show(relativeTo: button.bounds, of: button, preferredEdge: NSRectEdge.minY)

      self.popover.contentViewController?.view.window?.becomeKey()
    }
  }
}

 attribute marks the method as accessible and executable in Objective-C.

The "development" window allows us to iterate upon the React application and immediately see changes without having to open the popover to see changes anytime they occur. Both the window and popover share the same 

 to avoid having two separate instances of the application.

#if DEBUG
window = NSWindow(
  contentRect: NSRect(x: 0, y: 0, width: 1, height: 1),
  styleMask: [.titled, .closable, .miniaturizable, .resizable],
  backing: .buffered,
  defer: false)

window.contentViewController = rootViewController
window.center()
window.setFrameAutosaveName("Tempomat Main Window")
window.isReleasedWhenClosed = false
window.makeKeyAndOrderFront(self)
let screen: NSScreen = NSScreen.main!
let midScreenX = screen.frame.midX
let posScreenY = 200
let origin = CGPoint(x: Int(midScreenX), y: posScreenY)
let size = CGSize(width: 700, height: 800)
let frame = NSRect(origin: origin, size: size)
window.setFrame(frame, display: true)
#endif

: Once the popover opens, the window will no longer possess the controller, and the React application will only be rendered in the popover. For development, this is fine.

 tells the delegate when the application has launched. We will place all of the initialization code within the body of this instance method to execute this code once the application has launched.

import Foundation
import Cocoa

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {
  var popover: NSPopover!
  var window: NSWindow!
  var statusBarItem: NSStatusItem!

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

    #if DEBUG
      jsCodeLocation = RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index", fallbackResource:nil)
    #else
      jsCodeLocation = Bundle.main.url(forResource: "main", withExtension: "jsbundle")!
    #endif
    let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "<projectName>", 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 = "<projectName>"
    }

    #if DEBUG
    window = NSWindow(
      contentRect: NSRect(x: 0, y: 0, width: 1, height: 1),
      styleMask: [.titled, .closable, .miniaturizable, .resizable],
      backing: .buffered,
      defer: false)

    window.contentViewController = rootViewController
    window.center()
    window.setFrameAutosaveName("Tempomat Main Window")
    window.isReleasedWhenClosed = false
    window.makeKeyAndOrderFront(self)
    let screen: NSScreen = NSScreen.main!
    let midScreenX = screen.frame.midX
    let posScreenY = 200
    let origin = CGPoint(x: Int(midScreenX), y: posScreenY)
    let size = CGSize(width: 700, height: 800)
    let frame = NSRect(origin: origin, size: size)
    window.setFrame(frame, display: true)
    #endif
  }

  @objc func togglePopover(_ sender: AnyObject?) {
    if let button = self.statusBarItem.button {
      if self.popover.isShown {
        self.popover.performClose(sender)
      } else {
        self.popover.show(relativeTo: button.bounds, of: button, preferredEdge: NSRectEdge.minY)

        self.popover.contentViewController?.view.window?.becomeKey()
      }
    }
  }
}

 with your project's name. This is the project name specified during initialization via 

 files from Finder into Xcode's project navigator (under 

 directory). When presented with the "Choose options for adding these files" modal, accept the default selected options.

Inside of Xcode, check that the run destination is "My Mac" in the workspace toolbar. If not, then change the scheme to 

This is what the workspace toolbar should display:

To avoid Swift linking errors, let's enable dead code stripping by visiting the project's build settings and switching the "Dead Code Stripping" setting to "YES."

Now, let's tell Xcode to include Swift standard libraries in the final application bundle. 

 flag only when building and running the application from Xcode, search for the 

 setting under the "User-Defined" section of the target 

 flag only for the "Debug" mode, not for "Release." Otherwise, when you release the application to users, it will try to connect to the metro packager.

Undefined symbol: _swift_getFunctionReplacement

Then resolve it by switching the "Don't Dead-strip Inits and Terms" project setting under the "Linking" section to "Yes" for both "Project" and "Target."

To import Objective-C libraries from the Objective-C bridging header file 

 into Swift code, visit the project's build settings and set the "Objective-C Bridging Header" setting under the "Swift Compiler - General" section to the header file's path.

$(SRCROOT)/$(PROJECT_NAME)-macOS/$(PROJECT_NAME)-macOS-Bridging-Header.h

 are automatically substituted with their values. 

 source file that must be compiled during the build process, add this source file as a "Compile Source" within the target's "Build Phase" settings.

Click on project in project navigator. Clean the project by selecting "Product" from the upper menu and clicking the "Clean Build Folder" option.

 file from the project navigator. Under "Application Scene" in the left-sidebar of the project editor. In the right-sidebar, select the "Attributes Inspector" tab and enter "AppDelegate" as the App Delegate class.

If you click on the status item labeled with the project's name in the menu bar, a popover pops open and the development window no longer displays the React application. Inside of the popover is the React application. Click on the status item again and the popover is dismissed.

The smaller window is an initial window that's automatically launched for the application (in the top-left corner of the above screenshot). The larger window is the development window (in the lower-right corner of the above screenshot). Since the development window shares the same 

, if you resize this window, the content within the popover is also resized.

Notice that the dock shows an icon for the application. To omit this icon from the dock when running the application, edit the project's 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Converting a React Native for macOS Application into a Menu Bar Application

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript