Skip to content

Latest commit

 

History

History
29 lines (17 loc) · 1.57 KB

10.md

File metadata and controls

29 lines (17 loc) · 1.57 KB

Lesson 10: Add react-native-windows to the app

The first step when getting started with react-native-windows is to generate the native project for UWP.

Please note, if you are running Windows 10 on a VM (e.g., using Parallels), it is recommended that you re-clone your repo and re-install the node packages on the Windows VM. There will likely be issues with trying to build and run the UWP app from any mapped directory to the host OS.

Generate the native project

Using the rnpm-plugin-windows NPM package and the React Native CLI, generate the UWP native project for your app.

  • Install rnpm-plugin-windows.
  • Ensure the React Native CLI, react-native-cli is installed globally.
  • Generate the UWP project with the React Native CLI windows command.

Setup the default app for Windows

Currently, your UWP app will try to run the camera app we've built in the previous lessons. However, we don't have many of these dependencies set up yet.

Rename the App.windows.js file to App.windows.tsx and move it to the ./src directory in the project. This will override the existing App.tsx file for UWP for the time being. You'll also want to correct the TypeScript syntax:

  1. Change import React, { Component } from 'react' to import * as React from 'react'
  2. Change export default class App extends Component<{}> to export default class App extends React.Component

Run the UWP app on Windows 10

Test the app with the React Native CLI run-windows command.

Exit Criteria

  1. Visual Studio 2017 solution for UWP that runs the default React Native app template.