-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Using the new architecture templates
This document summarizes the current steps for creating a new RNW project using the (experimental) new architecture templates.
First, we must determine the version of react-native-windows
you wish to use. For this example, we'll say the canary
build since that's where active development is occurring. If you run the following, you'll get the concrete version of react-native-windows
's canary
tag:
npm show react-native-windows@canary version
Let's say it returned 0.0.0-canary.868
. Remember that for later, then, determine which base version of react-native
you should build the app from, again using the npm show
command:
npm show react-native-windows@canary peerDependencies.react-native
Note: Be sure to substitute the correct version of
react-native-windows
, i.e., if you're targetinglatest
, usenpm show react-native-windows@latest peerDependencies.react-native
instead.
Let's say the command returned 0.74.0-nightly-20231201-c30f2b620
. Then, use @react-native-community/cli init
to create your RN app project:
npx --yes @react-native-community/cli@latest init MyApp --version 0.74.0-nightly-20231201-c30f2b620
Note: There was some lag between moving to the
@react-native-community/template
package and actually publishing versions which match everyreact-native
version. If project creation fails because the template can't be found, you should try usingnext
, then, after the project creation succeeds, change the version ofreact-native
inpackage.json
to the version you wanted originally. See microsoft/react-native-windows#13446 for details.
You should now have a folder named MyApp
with your base RN app.
Next you'll need to add the version of react-native-windows
as a dependency to your app (using the concrete version you got earlier 0.0.0-canary.868
). Make sure you're in the app's directory and run:
yarn add react-native-windows@0.0.0-canary.868
Next, you'll use react-native init-windows
to add the RNW code to your app. Make sure you're in the app's directory and run:
yarn react-native init-windows --template cpp-app --overwrite --logging
You should now be able to run your app with react-native run-windows
as usual. Make sure you're in the app's directory and run:
yarn react-native run-windows --logging
Note: If these steps to upgrade RN in-place doesn't work, you might try re-creating a fresh base RN project using the steps above.
As with a new app project, first we must determine the version of react-native-windows
you wish to use. For this example, we'll use 0.0.0-canary.761
. Then, determine which base version of react-native
you should upgrade to, using the npm show
command:
npm show react-native-windows@0.0.0-canary.761 peerDependencies.react-native
Let's say the command returned 0.74.0-nightly-20231201-c30f2b620
. Then, use yarn upgrade
to upgrade your app's RN and RNW version:
yarn upgrade react-native@0.74.0-nightly-20231201-c30f2b620
yarn upgrade react-native-windows@0.0.0-canary.761
Next, you'll use react-native init-windows
to add the RNW code to your app. Make sure you're in the app's directory and run:
yarn react-native init-windows --template cpp-app --overwrite --logging
You should now be able to run your app with react-native run-windows
as usual. Make sure you're in the app's directory and run:
yarn react-native run-windows --logging
If you're working on some changes locally in your RNW repo, you can modify the procedures above as follows to use and test your local copy of RNW, instead of a published version off NPM. Assuming your RNW repo is at C:\code\rnw
:
- To determine which version of
react-native-windows
to use, use the version number in your RNW repo, which can be quickly determined with:npm show C:\code\rnw\vnext version
- When using
npm show
to determine the version ofreact-native
to use, instead use:npm show C:\code\rnw\vnext peerDependencies.react-native
-
After adding RNW to the project with
yarn add
you'll then want to link it to your repo instead withyarn link
:- In your RNW repo's
vnext
directory, runyarn link
. Note: This only needs to be done once for your machine. - Then, in your app's directory, run:
yarn link C:\code\rnw\vnext
- In your RNW repo's
Now your app should be using your local clone of RNW. Any code changes you make there will be available to your app.
Note: If you make changes to the
cpp-app
template itself, you'll need to re-run thereact-native init-windows
to apply those changes to your app's code.
Note: Linking creates a symlink from your app's
node_modules\react-native-windows
to your repo atC:\code\rnw\vnext
. So when your app builds, the RNW source and outputs will be those within your RNW repo. Be careful if you're hopping back and forth between working with the RNW repo's code and the app's code, (i.e. don't forget to runyarn build
in the RNW repo to build your TS changes into JS, and don't try to build say,Microsoft.ReactNative.sln
andMyApp.sln
at the same time.)
While the primary purpose of the init-windows
command is to support the new architecture app template (cpp-app
) you can do the steps above with any of the available templates by replacing --template cpp-app
with --template XYZ
, where XYZ
can be:
Template | Name |
---|---|
cpp-app |
React Native Windows Application (New Arch, C++, Win32, Hermes) |
cpp-lib |
React Native Windows Turbo Module (New Arch, C++) |
old/uwp-cpp-app |
React Native Windows Application (Old Arch, UWP, C++) |
old/uwp-cpp-lib |
React Native Windows Library (Old Arch, UWP, C++) |
old/uwp-cs-app |
React Native Windows Application (Old Arch, UWP, C#) |
old/uwp-cs-lib |
React Native Windows Library (Old Arch, UWP, C#) |