Setting up Windows for Android Development using React Native

[Participant @precious]

A beginner in native application development using React Native often finds the setup process as the most technical and stressful one. If s/he is able to make it past the setup stage, learning how to code may go seamlessly well. This article lists the requirements, explains the procedures and underlines the outcomes one should expect in starting up react native application development using the Windows operating system.

React Native is a framework built on ReactJS for the all-round design of mobile applications (Android and iOS). React Native was designed by the creators of ReactJS (Facebook) for creating cross-platform mobile applications. Its flexibility and simplicity has gained huge attention and popularity among developers who need a faster and more flexible way of designing mobile applications.

Before the introduction of React Native (and the likes), programmers and developers had to specifically design applications for android, then design them again for iOS (all from the scratch). React Native offers one the ability to write a program once and run it on different mobile operating systems, and the codes are reusable. It also means that one does not have to master as many programming languages as possible in order to write and run efficient web and mobile applications. Learning ReactJS and React Native is enough.

Setting up your computer environment for the development of Android applications often comes up as a herculean task for beginners; and it is rightly so because the set-up and installation procedures are detail sensitive (pay attention to all details!). Unfortunately, finding the right tutorial or article to help one through the process is often difficult – even the official React Native page guide does not seem to be satisfactory for beginners. This article aims to present this process in the best way possible – while ensuring that no detail is left out.

What do you need?

A beginner who uses Windows or prefers to use Windows as his operating system would need the following requirements and specifications for the best possible and error-free outcome;

• Windows 10 operating system – currently the most secure and flexible operating system Windows has to offer.
• 8GB of Random Access Memory (RAM) – this is necessary because mobile application development can take up as large as 2GB of RAM. To make sure that your activities do not slow down or limit the memory spaces other programs on your computer would need, upgrade the RAM.
• Powerful processors – Necessary to ensure smooth and fast-paced compilation and processing of program commands, including protocols that have to be continuously run and managed as you design your application. For a windows user, it is recommended you use Intel core i3 processors and above (or its equivalent).
• Hard drive space of at least 10 GB – for all the software installations necessary.
• Android Studio – the official Integrated Development Environment for Native Applications built for Android.
• Java Software Development Kit (Java SDK) – at least version 8 (as at the date/time of this article is published).
• NodeJs – the latest version available (always undergoes updates.)
• Python3 or a higher version
• NPM (Node Package Manager) – usually installed with NodeJs
• Visual Studio Code Editor – where you would write and manage the codes written for the program. It is recommended as the best Code Editor for android development projects.
• (Optional) A Smartphone running on an Android operating system – preferably Android 7.0 at least.

Install NodeJS

On your browser, open the NodeJs download page and select the Windows installer (32 or 64 bit). You might have to choose between the latest (current) version and the recommended version.

After downloading, the installation file runs and installs node and the node package manager (NPM). You might need to check the version installed. To do so, open your command prompt interface and run these commands.

To check for the version of node;
node -v
To check for the Node Package Manager version (NPM);
npm -v

The outcome should look like this;

<h2>Step 2: Install all dependencies</h2>
The most basic dependencies to be installed in order to properly run mobile applications are;

• Python 3 or higher
• Java SDK 8 or higher
• Chocolatey (for wrapping your software executable into compiled packages).

For a start, download the Chocolatey package manager.

Then open an administrator command prompt (that is, open command prompt as an administrator) and run the following commands;

choco install python3 jdk8

When it begins installation, you should see something like this;

A successful installation of both Python3 and JDK8 should give you this;

NB: Ignore the warnings.

Step 3: Install Android Studio and Configure it

To install Android studio, simply type https://developer.android.com/studio/ URL in your browser and download the application. The webpage for the download should look like the image below. The current version is 3.5.3.

It is recommended that you should remove any older version of android studio whilst installing the new. Anyway, as the installation progresses, you would be asked to remove the old version.

After the installation is complete, you would need to make some changes and additions to your environment variables to allow you build applications with React Native. To make this happen you would need to;

• Setup the ANDROID_HOME configuration (where can we find the development kit?)
• Setup the ANDROID_DEBUG_BRIDGE (what tools in the kit do we use for building and debugging?)
• Configure the Android Virtual Device (AVD) manager. (to test-run your application while it is in development) or you could have a nearby Smartphone or Tablet with an Android OS version of at least 7.0 (Nougat) to test your software. For this article I would show the steps to using a smartphone instead of an emulator. The configuration of the AVD would be discussed in later article.

To setup the ANDROID_HOME configuration, follow this steps;

• Click on Control Panel -> System -> Advanced System Settings -> Environment Variables.
• Click New under the user variables for user panel in order to create a user variable that points to the path of your Software Development Kit (SDK).
• Name the user variable ANDROID_HOME
• The variable value should be C:\Users\YOUR_USERNAME\AppData\Local\Android\sdk. Note that “YOUR_USERNAME” here should be replaced by your laptop username – such as user, donald etc.
• Click OK. and you are done.

To setup ANDROID_DEBUG_BRIDGE to PATH

• Click on Control Panel -> System -> Advanced System Settings -> Environment Variables.
• Under user variables for user, select the Path variable and click edit.
• A window should open looking like the one below, select New and add C:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\platform-tools\adb.exe
• Click OK.

To prepare your smartphone for android development, follow these steps;

• Go to settings
• Select the Developer options (if not enabled, scroll down to the about phone option and click on it, when it opens, scroll down to the build number and tap it seven (7) times to enable developer options.
• Finally, under Developer options, enable the USB debugging option, as well as the Stay Awake option in order to prevent your phone from going to sleep while you are working.

Step 4: Install Visual Studio Code

Visual studio code is the recommended editor for development of Native Applications using Frameworks like React, AngularJS and NodeJS. To install Visual Studio Code, head on to this URL and select the Windows version. Preferably 64-bit if you are using Windows 10. Download and Install the software.

After the installation, open the Visual Studio Code editor. A complete installation should have your editor looking like this;

Step 5: Install React Native CLI and Run your first Application

The last step is to install the React Native Command Line Interface (the command prompt equivalent that allows you execute commands for React Native applications) and create your first application. To do this, follow these steps:

• Create a folder and give it name, possibly React_Native_App.
• Open a command prompt interface and run the following command: npm install -g react-native-cli

A completed installation of React Native CLI should have an output like the image below;

To run your first application, you have to initiate the application by running the following code: react-native init my_app

The code above downloads React Native and the dependencies needed to efficiently run react native code and installs it into the local project folder (the one you created).

If the installation process is complete, you should see a your command prompt looking like this;

After initiation is complete, you are ready to run your app. Ensure that you have a Smartphone connected to your PC (Personal Computer) and that the developer options are enabled. Then follow these instructions;

• Open the command prompt and locate your android development platform tools. It should match this exact location: C:\Users\User\AppData\Local\Android\platform-tools>.
• If it does, type in adb devices and run the command. This would check if there are any real-world android smartphones connected to your laptop and whether or not they are authorized to run on the device . If any is attached and it is not authorized, you should see an image like the image below.

In this case, your device (smartphone or tablet) would show a dialog box asking you to authorize your laptop to run applications on the device. Accept the request by clicking “OK”. This automatically allows your device to run applications created by React Native from your PC.

• If you have authorized your device, you should see an output on command prompt looking like the image below.

• Type in adb reverse tcp:8081 tcp:8081 and run the command. It should return you to C:\Users\User\AppData\Local\Android\platform-tools> on the command line. This means you are ready to launch.

Finally, its time for a test!

Open a command line interface again, locate your app and run the following commands: react-native run-android

The react-native command line interface would be open (as shown in the image), loading the dependency graph. Once it is done, your application would run.

Now, your application should open up like the image below.

This completes the process of setting up your windows environment for android development using React Native. As you develop the application, just save your work and run react-native run-android command again. Your software would show up on your connected phone with the updates of what you have done so far.

 

[Author]

Posts