React Native - Environment Setup (Beyond corporate proxy/VPN)

Last week I was trying to set up react native installation on my work laptop to find it doesn't work starightway.I had to spend 3 hrs before finding the right settings to run the app on the emulator. In this post, we are going to see the steps needed to get a basic installation/setup of react-native (even if you work behind corporate proxy/VPN).

These are the tools we need in a development environment (Windows):

Visual Studio Code (you can use any other  favorite editor or IDE)
Android Studio
A built-in emulator in Android Studio
Node Package Manager (NPM)
Node.js (version 8 or newer)
React Native command line interface (React Native CLI)
Java Development Kit (JDK 8 or newer).

Step 1: Install Node
Download and install the latest version of Node.js from https://nodejs.org/en.
Step 2: Setup Java (Install JDK)
Download and install the latest version of Java SDK from http://www.oracle.com/technetwork/pt/java/javase/downloads/jdk8-downloads-2133151.html.
Step 3: Install Android Studio
Download and install the latest version of Android Studio for Windows from https://developer.android.com/studio/
The Android Studio installs the latest Android SDK by default and React Native requires Android 6.0 (Marshmallow) SDK or higher.
Once installed you can go to Tools > SDK Manager and choose any version above 6.0.

If you didn’t have any project yet (our case), you should go to Configure > SDK Manager:
Now, go to the SDK Tools tab and choose these options below:

You will need the Intel x86 Emulator Accelerator (HAXM installer) to run the emulator on Windows. For more information, please refer to the following link: 

https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows.
If you have Hyper-V feature enabled, you need to disable it (I know…)
Step 4:Configure Environment variables:
You may need to add Environment variables to make your life easier and the setup works properly.
Add the ANDROID_HOME variable: This would be the path of your installed SDK
Add JAVA_HOME variable: This would be the path of your installed JDK
Make sure you add on Path variable the path for Java SDK and Android platform-tools:
C:\Users\{your_user_name}\AppData\Local\Android\Sdk\platform-tools
C:\Program Files\Java\jdk1.8.0_181\bin

Step 5: Install React Native CLI
npm install -g react-native-cli
You can create the project by running the below command.

react-native init myFirstProject

Step 6: Running the Emulator
Click on AVD Manager and create a new Virtual Device (if you don't have one else run the already created one). 

Step 7: Setting if you are behind a corporate proxy.
Get the proxy setting :
You should know the Proxy IPs and port and if authentication is required.
Navigate to File -> Settings -> HTTP Proxy -> Add the hostname /proxy and if authentication required.

Run the emulator:

Click on the three Dots ->Settings -> 

This setting will allow the proxy to be inherited from Android Studio.

Step 8: Run the React-Native CLI project

react-native run-android

But if you are behind a proxy this will not load up tp set this up
Press Ctrl+M -> Settings

You should see this page. now click on Debug Server host & port device and type 127.0.0.1:8081 and reload the app and it should now work fine.
You can now continue with developing the react native apps.