React Native Series – Post – 1 – Installation and Setup in Windows

1
Spread the love

 

 

React Native Series - Post - 1 - Installation and Setup:

I am a newbie to Mobile App development, I have been writing my AWS posts for so​​ long, so​​ for a change​​ I thought that I will write this mobile development as I learn through it.​​ 

So this post dedicated to all out there who is struggling to setup the react-native mobile development environment in a windows operating system with an Android emulator trying to run the development server on a different port like 8088, because your McAfee FrameworkService is running on port 8081.

I struggled to setup my Dev environment with no one to turn towards for help , relied solely on the internet resources for clarification and help, So enough with the story , let’s get down to the business.

To setup the react native development environment, you need to first install nodejs

You can get the current version from the below link,

1. Install Nodejs

https://nodejs.org/en/download/current/

 

2. Install NPM windows upgrade

Now after​​ you install this, you can upgrade the npm, check the below link for more information​​ 

https://www.npmjs.com/package/npm-windows-upgrade

You need to run the below commands from a powershell,

  • Set -ExecutionPolicy  Unrestricted  -Scope  CurrentUser  -Force  

  • npm  install --global --Production  npm-windows-upgrade 

  • npm-windows-upgrade  

  • npm-windows-upgrade --npm -version  latest  

 

3. Install Yarn (For quick processing of​​ react-native​​ build files)

  • npm install --global yarn  

 

4. Install WatchMan​​ (FileWatching Service)

  • npm install –g watchman

 

5. Install​​ react-native command line tools

  • npm install –g react-native-cli

 

6. Install the latest Java​​ SDK​​ 

http://www.oracle.com/technetwork/java/javase/downloads/index.html

Add the entry to the computer’s environment variable.

 

7. Install Android Studio​​ (For Android SDK & AVD)

https://developer.android.com/studio/index.html

you can install Genymotion (Emulator) if you want, but I think android emulator should be enough.

Don’t forget to set the Android SDK home​​ & Gradle user home, I would recommend to set the SDK installation alone in the D drive, as it would take up unnecessary space in C drive. Add the entry to your computer’s environment variables.

 

8.​​ Install Android Packages

Please make sure you install the below​​ packages in the android sdk manager. It will be available under “D:\Android\sdk\SDK Manager.exe”, please make sure you install the below packages, as of now react-native only supports API-Level-23,

 

9.​​ Download and configure an AVD

Install a Nexus 5 AVD with the below settings,

 

I think I have covered everything with regards to this installation. You can visit the react-native website for additional information regarding the installation.​​ 

Now lets go ahead and create an app and see if we can set the app to communicate with the emulator on port 8088.The reason why we are making to connect on 8088 instead of 8081 is because of McAfee frameworkservice running on 8081 and​​ will not allow the react-native package server to run on that port. So we will make some changes to the react-native project and to the emulator, I will show you how to do it.

 

To create an app, run the below command, here gadoth is the app name that you are trying to initialize.​​ 

 

It will take 5 to 15 minutes depending upon the internet speed connection and processor speed, once it is completed, you will be presented with the below screen,

 

 

Now you need to do the​​ following,​​ create an​​ “assets”​​ folder under​​ D:\gadoth\android\app\src\main, this where your android app bundle will reside.

Next change the port no to 8088 in server.js​​ 

D:\gadoth\node_modules\react-native\local-cli\server\server.js.

You don’t have to the do the above step if you want to run​​ the package​​ server on 8081 itself.

 

So that the js server will start on port 8088,

Now lets go ahead run the app ,change to the gadoth app directory as below and run “react-native run-android”, before you run this command, please make sure the emulator is started and it is running state.

 

 

First it will start the js and then it will start building up the app,

 

To check the js server is running properly, open up the below url in the browser,

 

When you click R 2 times on the emulator , it will reload and it will show the below error screen (“ Could not connect​​ to development server ” , because it is trying to communicate to the js server on port 8081 instead of 8088.

So Now we need to make the below change. Click Ctrl+m on the emulator

 

Click​​ on Dev settings on the emulator and click on debug server host and port for device.

 

 

Enter the ip address as “10.0.2.2:8088”

 

Click on ok and then refresh the emulator by typing R two times

 

 

 

 

Edit the index.android.js file​​ 

 

 

Reload the app on the emulator, you will be able to see the changes in the app screen.​​ 

 

 

Thanks for viewing the post,​​ please post your comments below.

Related posts

2 Thoughts to “React Native Series – Post – 1 – Installation and Setup in Windows”

  1. sharing network

    I’m really enjoying the design and layout of your blog.

    It’s a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often. Did you
    hire out a designer to create your theme? Superb work!

    1. Thank you , I did it on my own.

Leave a Comment