Get Started with Windows
This guide will help you get started on setting up your very first React Native for Windows app.
Make sure you have installed all of the development dependencies.
For information around how to set up React Native, see the React Native Getting Started Guide.
Install React Native for Windows
Remember to call react-native init
from the place you want your project directory to live.
npx react-native init <projectName> --template react-native@^0.65.0
To create TypeScript template, run
npx react-native init <projectName> --template react-native-template-typescript
.
If you've installed react native globally in the past, vianpm install -g react-native
, and are having issues with the new instructions, try adding--ignore-existing
to yournpx
command:
npx --ignore-existing react-native init <projectName> --template react-native@^0.65.0
instead.
Navigate into this newly created directory
Once your project has been initialized, React Native will have created a new sub directory where all your generated files live.
cd projectName
Install the Windows extension
Lastly, install the React Native for Windows packages.
npx react-native-windows-init --overwrite
The --overwrite flag copies a custom
metro.config.js
file. If you are starting a new app, this should have no impact. If you are adding Windows to your existing app and you have modified themetro.config.js
file, please back up your changes, run the command and copy over to take effect.
For information on the options that react-native-windows-init
takes see React Native Windows CLI.
Running a React Native Windows App
Make sure a browser is launched and running before running a React Native Windows app. Also ensure your system meets all the requirements to build a Windows app as well.
Without Using Visual Studio
In your React Native Windows project directory, run:
npx react-native run-windows
For information on the options that
@react-native-windows/cli
takes see React Native Windows CLI.A new Command Prompt window will open with the React packager as well as a
react-native-windows
app. This step may take a while during first run since it involves building the entire project and all dependencies. You can now start developing! :tada:Using Visual Studio
- From the root of the project directory, run the following script which will automatically link your app's dependencies:
npx react-native autolink-windows
- Open the solution file in the application folder in Visual Studio (e.g.,
AwesomeProject/windows/AwesomeProject.sln
if you usedAwesomeProject
as<projectName>
) - Select the
Debug
configuration and thex64
platform from the combo box controls to the left of theRun
button and underneath theTeam
andTools
menu item. - Run
yarn start
(ornpm start
) from your project directory, and wait for the React Native packager to report success. - Click the
Run
button to the right of the platform combo box control in VS, or select theDebug
->Start without Debugging
menu item. You now see your new app and Chrome should have loadedhttp://localhost:8081/debugger-ui/
in a new tab. PressF12
orCtrl+Shift+I
in Chrome to open its Developer Tools. :tada:
- From the root of the project directory, run the following script which will automatically link your app's dependencies:
With VS Code
- Open your applications folder in VS Code.
- Install the React Native Tools plugin for VS Code.
- Create a new file in the applications root directory,
.vscode/launch.json
and paste the following configuration:
{ "version": "0.2.0", "configurations": [ { "name": "Debug Windows", "cwd": "${workspaceFolder}", "type": "reactnative", "request": "launch", "platform": "windows" } ] }
- Press
F5
or navigate to the debug menu (alternatively pressCtrl+Shift+D
) and in the Debug drop-down select "Debug Windows" and press the green arrow to run the application.
Authoring Native Modules
See Native Modules and React Native Windows.
Building a standalone React Native Windows App
Follow these steps to build a version of your app that you can install or publish to the store. This version will package your bundle and assets into the APPX package so you don't need to run Metro.
- Open the solution in Visual Studio
- Select the Release configuration from the Configuration Manager drop-down.
- Build the solution. You can now launch without first launching Metro.
- If you want to build an APPX package to share or publish, use the Project > Publish > Create App Packages... option.
The Debug configuration uses the Web Debugger by default, which means the application's JavaScript code runs in Chrome.
If you're getting different runtime behavior between the Release and Debug configurations, consider disabling theUseWebDebugger
setting inApp.cpp
orApp.xaml.cs
to get the same behavior in the Debug configuration.
See also this article for additional details: https://techcommunity.microsoft.com/t5/windows-dev-appconsult/getting-started-with-react-native-for-windows/ba-p/912093#