Skip to content

ConsumingRNW.md

Latest commit

 

History

History
70 lines (51 loc) · 3.48 KB

ConsumingRNW.md

File metadata and controls

70 lines (51 loc) · 3.48 KB

Consuming react native windows

Installing React Native

  • Install React Native command line interface using NPM:

    npm install -g react-native-cli

  • Initialize your React Native project

    Next, generate a React Native project. In the directory you would like your React Native Windows project directory, run:

    react-native init <project name> --version 0.60.6

    Navigate into this newly created directory:

    cd <project name>

Installing React Native Windows (vnext)

  • Install the React Native Windows command line interface (rnpm-plugin-windows).

    If you are using Yarn, run

    yarn add rnpm-plugin-windows

    Alternatively, if you are using NPM, run

    npm install --save rnpm-plugin-windows

  • Next, initialize your React Native Windows vnext in the project directory. This step may take a while during first run due to dependency download.

    react-native windows --template vnext

Running a React Native Windows App

Note: Make sure a browser is launched and running before running a React Native Windows app.

  • Without Visual Studio

❗ We are seeing issues with msbuild with the below command. This is being investigated in Issue 3263. Until this is fixed, please use the With Visual Studio option below.

In your React Native Windows project directory, run:

react-native run-windows

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! 🎉

  • With Visual Studio

    • Open the solution file in the application folder in Visual Studio (e.g., AwesomeProject/windows/AwesomeProject.sln)
    • Select the Debug configuration and the x64 platform from the combo box controls to the left of the Run button and underneath the Team and Tools menu item.
    • Run yarn 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 the Debug->Start without Debugging menu item. You now see your new app and Chrome should have loaded http://localhost:8081/debugger-ui/ in a new tab. Press F12 or Ctrl+Shift+I in Chrome to open its Developer Tools. 🎉

Authoring Native Modules (vnext)

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 DebugBundle or ReleaseBundle configuration from the Configuration Manager dropdown. DebugBundle is similar to Debug in that it adds more debugging info to the native code. Use this if you want to debug the native code. ReleaseBundle is similar to Release, you'll typically use this when producing a final package to publish to the store.
  • 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.