Task 4- Setting up android virtual device/emulator

In the previous task, we initialized/scaffolded a react-native project named ‘momentz4ever’ using react-native-cli’s init command.

We also saw how the android folder created inside our project folder ‘momentz4ever’ is a native android project.

In this task, lets first try opening this android project from Android Studio ( that we installed in Task 2 ).

From Windows Search, search and open Android Studio.

On the Android Studio Welcome screen, select the option - Open an existing Android Studio project.

You will be prompted for selecting the Android project folder. Select the ‘Android’ folder inside our react-native ‘momentz4ever’ project.

Android Studio will start building Gradle for the project:

Building Gradle may take few minutes. Android Studio may throw some errors during the Gradle Build for some missing platform, tools or components. It will suggest a link to install the missing part in the ‘messages’ pane as below:

Click on the suggested link, the missing platform’s installation will begin.

Once the missing platform’s installation is finished, the Gradle build process will resume. You may get couple of more errors depending on your version of Android studio installed, keep clicking on the suggested links in the ‘messages’ pane and installing the missing platform/tools, until the Gradle is build successfully.

For me, it also prompted me to upgrade the Gradle plug-in during the process, which I did.

Finally, if everything goes well, you should see a Gradle build finished message as below:

Now that we have Gradle built successfully, lets open an Android device emulator from the Android studio - Tools - AVD Manager menu.

Android Virtual Device manager window will open up:

Click on the button — ‘Create Virtual Device’.

This will bring up ‘Choose a device’ screen:

Select a device of your choice. I selected ‘Nexus 5X’ above. Click ‘Next’.

Next will be ‘Select Image’ screen. React-Native is currently supporting API version 23 — Marshmallow.

Click on the ‘Download’ link next to Marshmallow.

Click ‘Finish’ once download is complete and you will be back on ‘Select Image’ screen. Here, click on ‘Install Haxm’ link.

Select the recommended RAM size and click ‘Next’. The HAXM installation will begin.

Click ‘Finish’ button once HAXM installation is complete. Back on ‘Select Image’ screen, click ‘Next’ button to move to Verify configuration screen.

(For some reason, it keeps showing HAXM is not installed even when we have it installed)

Here provide a name for the Virtual Device/emulator. Click ‘Finish’.

Once the virtual device is ready, it will show up in the AVD manager screen now:

Click on the green play button in the ‘Actions’ column of the added device row.

This should launch the virtual device. Allow it to boot up fully, may take few minutes for the first time.

We have successfully setup our emulator and Android Studio.

In the next task, we will build and launch our ‘momentz4ever’ react-native app on the emulator using the cli command:

react-native run-android