coinpayu

React Native - Development Environment Setup (for Windows)

December 28, 2020

    Setting up React Native on Windows is challenging and requires attention to a lot of moving pieces, even if you want to get a sample app up and running on an emulator.

Hi guys! In this article I will discuss about how to set up your development environment setup on windows For react native using android studio to build Android Apps.

React Native Prerequisite:

      1. Windows
      2. Visual Studio Code
      3. Java Development Kit (newer)
      4. Android Studio
      5. Node.js (newer)
      6. Node Package Manager (NPM)
      7. Built-in emulator in Android Studio
      8. React Native command line interface (React Native CLI)


Step 1: Install Visual Studio Code


Step 2: Install Oracle Java Development Kit ("JDK")

  • Since Android apps are written in Java, you will need the Oracle Java compiler and libraries on your system. These are collectively called the Java Development Kit or "JDK" for short.


NOTE: If you are certain that you already have JDK higher on your computer, you can skip to Next Step.

 

  • Go to the Java SE Downloads page and click the DOWNLOAD link Inside the table list. Click the radio button to accept the License Agreement, then download the appropriate JDK for your operating system. For example, on Windows, click to download the "Windows x64" installer.


IMPORTANT:  After JDK installed in your windows system, Check that environment variable JAVA_HOME is set to the JDK installation directory by manually or via command line like "set JAVA_HOME". Otherwise, Follow the steps HERE.


Step 3: Install Android Studio

    NOTE: Before installing Android Studio, Please make sure all your JDK related setups are completed correctly. Because, Try to install Android Studio without JDK setup. It may leading some unexpected issues.

 

  • Download and install the latest version of Android Studio for Windows. Android Studio installs the latest Android SDK by default. React Native requires Android 6.0 (Marshmallow) SDK or higher. My Choice is Android 10.0 (Q). You can also choose the latest released version of Android OS.


  • Make sure you have the following SDK tools installed



Important: You will need the Intel x86 Emulator Accelerator (HAXM installer) to run the emulator on Windows. For more information, click HERE.

NOTE: You need to enable Intel Virtualization Technology by changing a BIOS setting. For reference , click HERE.

 

  • Configure the ANDROID_HOME environment variable. In windows 10 Open the Start Search, type in “env”, and choose “Edit the system environment variables”


  • Click on New to create a new ANDROID_HOME user variable that points to the path to your Android SDK


  • Finally, add Android Debug Bridge (ADB) to the PATH environment variable. This will help you know which devices are connected or which emulators are currently running. Install location of ADB: 

Environment Variables → User Variables container select "path" variable then click edit and add new ADB path like this:                      "%LOCALAPPDATA%\Android\Sdk\platform-tools" then click all tabs to ok.


Step 4: Install Node

  • Download and install the latest version of Node.js for windows.

NOTE: Npm is installed with Node.js.

 

  • After finished your Node installation, Open a command prompt (or PowerShell), and enter the following commands: node –v The system should display the Node.js version installed on your system. You can do the same for NPM: npm -v

NOTE: If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues.


Step 5: Creating a new React Native application

  • YAY! Finally, lets create our first React Native application by running the following command in your workspace location

npx react-native init AwesomeProject

 

  • [Optional] Using a specific version or template: If you want to start a new project with a specific React Native version, you can use the --version argument:

npx react-native init AwesomeProject --version X.XX.X

  • You can also start a project with a custom React Native template, like TypeScript, with --template argument:

npx react-native init AwesomeTSProject --template react-native-template-typescript

  • This creates the following project directory structure when you open the project in Visual Studio Code.


Step 6: Preparing the Android device

  • You will need an Android device to run your React Native Android app.  There are two ways you can run your react native app.
      1. Using a physical device
      2. Using a virtual device

  • Using a physical device: If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions HERE.

  • Using a virtual device: you will likely need to create a new AVD using Android Studio. please make sure all your packages installed correctly.

  • Click AVD Manager in the toolbar. Then click new Create Virtual Device... Button.


  • Choose your device in phone category then click next.


  • Select the Q API Level 29 image. you previously installed in step 3.  Then click next and Finish.



  • Now start your emulator by click on action play button for run your android app.

NOTE: If You have any error message when you start your emulator,  Please "Wipe Data" before you start 


Step 7: Running your React Native application

  • First, you will need to start Metro, the JavaScript bundler that ships with React Native. To start your app, run the following command inside your React Native project folder(This command will automatically start your Metro in new terminal):

  npx react-native run-android


Important: Before start, In the file  root "android/gradle/wrapper/gradle-wrapper.properties", ensure that the distributionUrl is as follows: "distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-bin.zip"

NOTE: If you installed JDK 14 or higher

  • If everything is set up correctly, you should see your new app running in your Android emulator like this.


If This article really helpful for you, please leave a comment. And Share This to who really need this.