Getting started with react-native-macos

React Native for macOS is a really powerful implementation of React Native for building Mac apps, but the RN macos documentation (as of today) is straight up wrong and won't work.

Here's how to spin one up!

Prerequisites

This assumes you are on a Mac and have installed all the prerequisites for RN iOS.

Create a normal React Native app

Your React Native for macOS app will live inside a normal React Native app, as a macos folder alongside your ios and android folders.

npx @react-native-community/cli@latest init PizzaApp --version 0.78.3

Answer "No" to the Cocoapods question, as we won't be using the iOS or Android apps for this demo.

Spin up a macOS app inside it

cd PizzaApp
npx react-native-macos-init

Enable Hermes and the New Architecture

In ./macos/Podfile, make the following changes:

  use_react_native!(
    :path => '../node_modules/react-native-macos',
-    :hermes_enabled => false,
+    :hermes_enabled => true,
    :fabric_enabled => ENV['RCT_NEW_ARCH_ENABLED'] == '1',
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

Warning

You'll need to pass in RCT_NEW_ARCH_ENABLED=1 for pod install and for building/running the app or it WILL NOT WORK. You cannot just update :fabric_enabled above to true.

Install Cocoapods

RCT_NEW_ARCH_ENABLED=1 pod install --project-directory=macos

Start the Metro packager

npm run start

You should see the Metro packager pop up.

Compile and run the macOS app

In a new terminal tab or window, run this in the project directory:

RCT_NEW_ARCH_ENABLED=1 npx react-native run-macos

You should see this pop up!

Start editing

Go to App.tsx and start your journey!

jamonholmgren/react-native-macos-start.md