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
2. Install NPM windows upgrade
Now after you install this, you can upgrade the npm, check the below link for more information
You need to run the below commands from a powershell,
3. Install Yarn (For quick processing of react-native build files)
4. Install WatchMan (FileWatching Service)
5. Install react-native command line tools
6. Install the latest Java SDK
Add the entry to the computer’s environment variable.
7. Install Android Studio (For Android SDK & AVD)
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
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.