Installing the necessary tools

If you have spent any time reading the official React Native documentation, you may have found it to be great in some areas and less great in others. Up until relatively recently, I personally found the React Native Android setup documentation to be challenging. Thankfully, as of version 0.25.0, the React Native community has really stepped up. If you head over to the React Native Getting Started page (https://facebook.github.io/react-native/docs/getting-started.html), you'll find excellent documentation that walks you through the process. The Android setup section of this chapter will closely follow the directions outlined on the official React Native setup docs. When appropriate, I'll add a bit more context, but feel free to refer to the React Native docs as they'll always be the most current.

Many of the tools required for Android development were already addressed in Chapter 2 , Saying Hello World in React Native. In this chapter, the main parts you'll need to focus on are installing the Java Development Kit (JDK), Android Studio, and configuring some environment variables. Later, we'll use the Android emulator that comes as an optional install with Android Studio. Alternatively, GenyMotion also allows you to emulate many popular Android devices and offers a more robust suite of tools, which are particularly tailored towards automated testing. However, these advanced features are not available with the free offering from GenyMotion, but may be worth exploring depending on your needs. Since we're already planning on installing Android Studio, we'll just stick with its emulator.

Installing the Java Development Kit

The JDK is a suite of software tools required for developing Java applications. Android Studio requires JDK 1.8 or higher to be installed. It's possible you already have a version of the JDK installed on your machine. Let's check by running the following command from your terminal:

javac -version

If you see a version that meets our requirements, you can skip ahead in the chapter to the Installing Android Studio section. If not, we'll walk through how to install it. Refer to the following screenshot:

To install JDK 1.8, visit http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html in your web browser. Scroll down the page a short way and you'll find a few download options. Select the radio button to accept the license agreement and then click the link that corresponds with Mac OS X (macOS). Refer to the following screenshot:

Tip

Note: The previous screenshot may be out of date by the time you read this. Feel free to grab the latest version available from the download site.

After you've run the installer, verify the JDK version with javac -version. Don't worry if it doesn't match exactly with the screenshot. So long as it matches 1.8.x, you've got what's needed. Refer to the following screenshot:

Installing Android Studio

Android Studio is an integrated development environment tailored for Android development. After we've completed the initial setup process, you won't actually need to run Android Studio for any day-to-day React Native development. For the purposes of this chapter, we're really just installing it for all the software and tools that are bundled with it.

The React Native documentation recommends installing Android Studio 2.0 or greater. You can download it from http://developer.android.com/sdk/index.html. Once it has completed downloading, open the DMG and drag Android Studio into your Applications folder. The first time you run it, Android Studio may ask you if you'd like to import your previous settings. I chose the default I do not have a previous version of Studio... option, but choose whichever is appropriate for you. After making your selection, Android Studio will walk you through the setup wizard. When you get to the step titled Install Type, select Custom.

Select whichever UI theme you prefer. When you get to the step entitled SDK Components Setup, make sure both Performance and Android Virtual Device are checked. The Performance piece is used for speeding up emulation. The second is the Android emulator we'll use for testing. Refer to the following screenshot:

Once you click Next, you can complete the wizard with the default selections. The next step will download everything we've configured up to this point. Once it's complete, click Finish.

Configuring Android Studio

Okay, part one is done. Now we're onto part two. From the Android Studio welcome screen, select SDK Manager from the Configure menu in the lower-right corner, as shown in the following screenshot:

Here, we'll need to install a few more items. With the SDK Platforms tab selected, select Show Package Details in the lower-right corner. Under Android 6.0 (Marshmallow), ensure the following items are checked:

• Google APIs
• Intel x86 Atom System Image
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom System Image
• Google APIs Intel x86 Atom_64 System Image

Next, select the SDK Tools tab and select Show Package Details again from the lower-right corner. In the main view, under Android SDK Build Tools, ensure Android SDK Build-Tools 23.0.1 is selected. Then click OK. Refer to the following screenshot:

You'll then be asked to confirm you'd like to install these tools. Click OK, accept the terms and conditions, and complete the installation process.

Configuring ANDROID_HOME and your PATH

Once the download completes, you'll have all the necessary tools installed. The last thing you need to do is define the ANDROID_HOME environment variable. This is needed to tell your system where it can find the Android SDK. Additionally, we'll add the Android tools path to our PATH so we can use commands such as android avd and adb devices. To begin, run the following from the Terminal:

open ~/.bash_profile

Tip

If you see the error .bash_profile does not exist, you'll need to create one. To do that, simply type:

touch ~/.bash_profile.

Add the following lines to your bash_profile:

export ANDROID_HOME=~/Library/Android/sdk
PATH="~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools:${PATH}"
export PATH

Save the file and close it. Back in the Terminal, type:

source ~/.bash_profile

This will ensure the contents of the .bash_profile have been executed. To verify, type:

echo $ANDROID_HOME

You should see something similar to /Users/your-username/Library/Android/sdk.

Verifying that the CPU/ABIs are installed

Setting up all the necessary Android development dependencies is a bit of a chore. Personally, I've run into issues where everything required to run the Android emulator still isn't installed. To verify that you have everything, run the following from your Terminal:

android

This will open the Android SDK Manager. Scroll down to Android 6.0 (API 23). Looking in the rightmost column, ensure that SDK Platform, Intel x86 Atom 64 System Image, and Intel x86 Atom System Image are installed. If not, don't fret. Check the three boxes and click the Install 3 packages... button.

Starting the Android emulator

Running the Android emulator is a bit different from how we run the iOS simulator. Initially, we'll need to create an Android Virtual Device (AVD) by running the following command:

android avd

This will launch the AVD Manager. Select Device Definitions. You're welcome to create an AVD from whichever device you'd like. I chose the Nexus S device. Once you've found one you like, click Create AVD on the right.

You'll need to fill in a few of the form fields before you're able to proceed. Select a Target, CPU/ABI, Skin, Front Camera, and Back Camera option. For Skin, be sure to select a Skin with dynamic hardware controls. This will expose buttons such as the Menu and Home buttons to you. Then click OK. Refer to the following screenshot:

Click on the Android Virtual Devices tab and you'll now see your new AVD listed. Select your device and click Start.... Refer to the following screenshot:

Once the AVD has launched, you're all set to run your React Native app in Android.

Tip

Instead of first launching the AVD Manager, you can use emulator to launch your emulator directly by name by using the following command:

emulator -avd AVD_for_Nexus_S_by_Google

Tip

The value avd_for_Nexus_S_by_Google needs to match the name of your AVD in the AVD Manager.