Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save shirakaba/6ac4f941efe3366ef4e116084282bffb to your computer and use it in GitHub Desktop.
Save shirakaba/6ac4f941efe3366ef4e116084282bffb to your computer and use it in GitHub Desktop.
React Native Windows and React Native macOS handbook

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment