Installation And Running React Native On Windows OS

In a previous article, I had given an introduction to React Native.

You need to have Android Studio or XCode depending on the OS you are using. If you don’t have any of these, then you need to install them.

Procedure to install React Native on Windows

Install Android Studio if you don’t have it already on your system.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 9 (Pie) entry, then make sure the following items are checked:
- Android SDK Platform 28
- Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
- Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 28.0.3 is selected.
Finally, click "Apply" to download and install the Android SDK and related build tools.

Install Chocolatey.

Before moving ahead, here's a little explanation on Chocolatey.

Chocolatey is a package manager for Windows (like apt-get or yum but for Windows). It was designed to be a decentralized framework for quickly installing applications and tools that you need. When I was installing components for React Native, I really felt that it was a headache.

But when I saw it was installing all necessary things automatically on my one command, I was really impressed with it.

To install it -

User must have Windows 7 operating system or newer.
.NET framework 4+.
You must have administrative access to your pc. However they have given steps to install Chocolatey for non-administrative users.
Right click on your command prompt and open it as administrator.
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

Copy the above command and paste it in the command prompt and press Enter.

After installing Chocolatey, copy paste the below command.

choco install -y nodejs.install python2 jdk8 .

This will install node.js, Python2, and JDK8 on your system. Wait until it completes. Sometimes, it takes time. As you can see you will be able to install three things in one command and that’s why I love chocolatey.

When you are able to type something on command prompt, that time only your necessary components have got installed. Why I am telling you because sometime screen looks idle and you may feel your system got hanged.
Restart your system.
If you already have node, then it should be 3 or later.
If you already have jdk, then it should be 8 or later.
Important use of node is, you can use npm to install react native command line interface.
Run the following command in a Command Prompt or shell

npm install -g react-native-cli

I had tried to install react native on windows 7 32 bit but it’s failed to install on it.
Creating new application,
- Open command prompt in administrative mode.
- Go to folder where you want to create project. Use “cd or cd..”etc command.
- Enter below command and press enter.
  
  react-native init HelloWorld

After installing all this, we need one IDE from where we can write our code. I prefer Microsoft visual studio code. Install it.
- Click on extensions on left side.
- Search for react native tools and install it.
- Select your folder to open react native project.
- You can see all the files including android and iOS folders.
- Click on android and check for local.properties file.
- If its not there then add it.
- Type this:
  
  Windows -> sdk.dir=C:\\Users\\Nilesh\\AppData\\Local\\Android\\Sdk

Set JAVA_HOME
- Right click on computer or my pc and goto properties
- Click on advance system settings
- Click on environment variables
- Then new below user variable
- In variable name enter JAVA_HOME
- In variable value enter below path
  - Go to Android studio - click on file - other settings - default project structure - copy whole path in JDK location
  - Paste it in variable values.
- Restart your pc.
- You can run your application in two ways.
  - Using physical device.
    - Make sure your device is in developer mode. If not then go to Settings→ About phone and then tapping the Build number row at the bottom seven times. You can then go back to Settings → Developer options to enable "USB debugging".
    - Connect your device to system via USB.
    - You must have only one device connected at a time.
    - Run following command in command prompt to run your application.
      
      react-native run-android

Run the above command in your project folder only. e.g. project path and above command.
Once you have installed your application using USB then you can debug your application using WiFi.
To debug your application using WiFi, both device and your system must be in same WiFi network.
Open your app on device, you will get error in red. Ignore it.
Go to developer menu in settings.
Go to Dev Settings→ Debug server host & port for device.
Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
- Run ipconfig command in command prompt.
- Ipv4 address is your ip address.
- local dev server is most of time 8081.
Go back to the Developer menuand select Reload JS.

Using virtual device.
- Create virtual device in android studio, if you don’t have any. Google for it or find in this website, you will get loads of article on it.
- Once virtual device is open, run below command in command prompt.
  
  react-native run-android

That’s it. As we have a habit of running and debugging applications by clicking on a button, you may find it’s irritating to type a command all the time but after you understand how helpful the arrow up and down button in the command prompt are, you will find it's easy. :D

In the next article, we will write a helloworld project and see all the details of it. Most of the things I will share with you will be from my personal experience.

Happy Coding…

2 Comments

Join the conversation! Your thoughts help the community grow.

Lan Zorg7y ago
Why is it that complicated to develop with RN? People have to know Xamarin, it needs to click on a single checkbox for installation and maybe three clicks to setup a complete Xamarin.Forms project!
- Nilesh Sawardekar7y ago
  I accept Microsoft having all the setups of it in single click because they are in UI.. but there are few restrictions by xamarin, which developers don’t like. React native is freeware.