React Native Windows and React Native macOS handbook

React Native Windows and React Native macOS handbook.md

How to init a project

⚠️ As the original react-native-windows-init command is to be deprecated from [email protected], we should now use init-windows, even for generating projects using earlier versions.

See the new init-windows command in their @next docs.

Usage

The command expects to be run inside an existing React Native project, so run steps 1-2 (as per the docs) if starting from scratch.

Windows

# 1. Create a new React Native project
npx --yes @react-native-community/cli@next init MyApp --version 0.75
cd MyApp

# 2. Add the react-native-windows package (preferably matching the minor version of react-native).
#    This is necessary to add the `init-windows` command to the `react-native` CLI.
npm install --save-exact react-native-windows@~0.75

# 3. Initialise an app or library in the repo.
# New arch:
npx react-native init-windows --logging --overwrite --template cpp-app --name MyNewArchApp --namespace My.New.Arch.App
npx react-native init-windows --logging --overwrite --template cpp-lib --name MyNewArchLibrary
# Old arch:
npx react-native init-windows --logging --overwrite --template old/uwp-cpp-app --name MyOldArchApp --namespace My.Old.Arch.App
npx react-native init-windows --logging --overwrite --template old/uwp-cpp-lib --name MyOldArchLibrary

# 4. Optionally set UseExperimentalNuget to true:
#    https://microsoft.github.io/react-native-windows/docs/nuget#c-projects-1

# 5. Autolink the project (necessary if running via Visual Studio; but redundant if running via `npx react-native run-windows`)
npx react-native autolink-windows

# 6. Run the project (by opening MyAppName/MyAppName.sln in Visual Studio and running for your preferred arch, or):
npx react-native run-windows --arch arm64

Frictions with NuGet

Problem: even if you specify v0.75 explicitly, it seems to give the following warning mentioning v0.76, so maybe NuGet always gets the latest even if npm specified an exact version?

1>C:\Users\jbizz\git\MyNewArchApp\windows\MyNewArchAppName\MyNewArchAppName.vcxproj : warning NU1601: Dependency specified was Microsoft.ReactNative (>= 0.75.6-Fabric) but ended up with Microsoft.ReactNative 0.76.0-preview.1. 1>C:\Users\jbizz\git\MyNewArchApp\windows\MyNewArchAppName\MyNewArchAppName.vcxproj : warning NU1601: Dependency specified was Microsoft.ReactNative.Cxx (>= 0.75.6-Fabric) but ended up with Microsoft.ReactNative.Cxx 0.76.0-preview.1.

So I think either we need to disable ExperimentalNuget or use 0.76 / canary. I tried using canary, but react-native has already moved onto v0.77 while react-native-windows is still working on v0.76, so let's try v0.76 instead.

npx --yes @react-native-community/cli@next init MyNewArchApp --version 0.76.0-rc.0
npm install --save-exact [email protected]
npx react-native init-windows --logging --overwrite --template cpp-app --name MyNewArchApp --namespace My.New.Arch.App

macOS

# 1. Create a new React Native project
npx --yes @react-native-community/cli@next init MyApp --version 0.75
cd MyApp

# 2. Add the react-native-macos package (preferably matching the minor version of react-native).
#    There is no `init-macos` command in the `react-native` CLI currently, but this may be
#    necessary to support it in future.
npm install --save-exact react-native-macos@~0.75

# 3. Initialise a new app in the repo. The name is based on the "name" field of your package.json.
npx react-native-macos-init

# 4. Autolink the project
cd macos && pod install && cd ..

# 6. Run the project (by opening macos/MyApp.xcworkspace in Xcode and running the macOS target, or):
# Terminal 1:
npx react-native start
# Terminal 2:
npx react-native run-macos

Templates

The source code for the templates lives here, and the templates are again documented in the init-windows docs.

• New Architecture:
  • cpp-app: C++, Win32, Hermes app, uses Experimental Nuget by default. More precisely, it seems to be a WAP app with the capability to run a full-trust app (which is presumably the Win32 app). Curiously, the Win32 app isn't set up as an App Service (an extension); the manifest doesn't mention it at all. But there are mentions of UWP in the manifest, so perhaps the WAP app has some UWP aspects to it.
  • cpp-lib: C++, Hermes lib (a Turbo Module)
• Old Architecture:
  • C++:
    • old/uwp-cpp-app: C++, UWP app
      • Equivalent to npx react-native-windows --language cpp --projectType app.
    • old/uwp-cpp-lib: C++, UWP library
      • Equivalent to npx react-native-windows --language cpp --projectType lib.
  • C#:
    • old/uwp-cs-app: C#, UWP app
      • Equivalent to npx react-native-windows --language cs --projectType app.
    • old/uwp-cs-lib: C#, UWP library
      • Equivalent to npx react-native-windows --language cs --projectType lib.

A warning from Jon Thysell:

Caution: The new architecture templates available from this command are in no way ready or supported, especially in whatever state they were in in RNW 0.73.