Setup React Native on Windows

Setup React Native on Windows

React Native is a fantastic technology that allows us to build real native mobile applications with JavaScript and the React UI library. The majority of tutorials on React native are on a Mac in OSX, but what about those of us in Windows? In this post I will show you how to get React Native setup in Windows 10 and initialize an application.

Install Java

Chances are you already have Java installed because it’s needed for so many other things. You may only have the runtime but you will also need the development kit (JDK) at least version 6. You can get it here

Android SDK & Android Studio Setup

In order to run and test React Native apps, you need to setup the Android Studio Suite. This includes the following…

  • Android Studio IDE
  • Android SDK (Software Development Kit)
  • Android Virtual Device

The first thing that you need to do is download Android Studio from here and get that installed on your machine

Take note of the location of the SDK. It will probably be in your Users/YOURUSERNAME/AppData/Local/Android/sdk folder

Once you have Android Studio setup, start it up and you should see a welcome screen. We need to get to the SDK Manager. Now we could enter the IDE, create a project and get to it that way but the easier thing to do would be just to click “Configure” on the welcome screen and select “SDK Manager”

SDK 6.0 (Marshmallow)

At this time, if you want React Native to work properly, you need to install version 6.0 of the SDK (Marshmallow). You can still install the latest version which should be checked by default, but also make sure 6.0 is selected.

HAXM

You also need the Intel Emulator Accelerator (HAXM) from the “SDK Tools” tab. This should be checked by default.

Install those packages and then click the “Standalone SDK Manager”

From here, install

Build tools for Rev 23.0.1, 23.0.2, 23.0.3

System Image for the virtual device – Intel Atom 64

System Paths

After you get all that installed, you need to add the system paths

Open up your control panel and go to System and Security->System->Advanced System Settings and click “Environment Variables”

Under “User variables” you should have a PATH variable. Add the following to it..

C:\Users\YOURUSERNAME\AppData\Local\Android\sdk\platform-tools

C:\Users\YOURUSERNAME\AppData\Local\Android\sdk\tools

Under “System variables” you need to add

You should now be able to use the android command in the command line

android sdk – Will open the SDK manager

android avd – Will open the AVD manager

Setup The Android Virtual Device

Open up the AVD Manager and create a new device.

Here are the settings I would recommend

Once all that is done you should now be able to start up your virtual device

Installing React Native CLI

Now that your Android virtual device is up and running, we can now install React Native. You will need Node.js/NPM, so if you do not have Node installed, get it from here

It is recommended that you install Yarn which is another package manager. It helps move along the CLI setup. So open a command line and run

$ npm install -g yarn

Make sure you use the global (-g) option

Now you can install the React Native CLI

$ npm install react-native-cli

Next thing you want to do is create your application. SO go to a folder where you want your new app created and run

$ npm react-native init myapp

This will create a new React Native application called “myapp”. Go into that folder

$ cd myapp

Now run the React Native packager
$ react-native start

While that is running, open up a new terminal/command line and run the app on your virtual device

$ react-native run-android

That should start your application. You should see a screen like this…

Debugging

If you want to debug and read console messages, open up another command line in the app folder and run

$ react-native log-android

That’s it! You can now start to create your React Native application. Click here to watch my React Native crash course and here to purchase the full course from Eduonix

Comments

  • Write a Reply or Comment

    Your email address will not be published. Required fields are marked *