Setup React-Native For Android App Development On Windows – Part 2

Android_Studio_icon

In the last blog, we have already setup Android Studio 2.3.3 and Reactive Native dev tools, and successfully run the startup project in the emulator of Android Studio.

Setup Genymotion For Emulation

The default emulator which comes with Android Studio is laggy and slow, and even Google recommends Genymotion as the emulator for Android app development. Before you start, you really need to sign up (and activate your account) on its official website:

genymotion-website

Otherwise, you won’t be able to finish this setup. Since its home page changed, the download link of the free version seems to be a secret path now, anyway, it’s here.

Basically, I took some video tutorials on youtube as the reference, but none of them covers everything:

 

 

 

 

 

 

You can find a lot out there, but most of them are exactly the same as the first one.

Let’s go through the steps.

Step 1: Install & configure Genymotion

If you have never installed Genymotion or Oracle VM VirtualBox before, you can refer to any of the tutorials on youtube, and skip the rest of step 1, jumping to step 2 straightway. Just keep in mind that you should choose the installation file with VirtualBox – the bigger one.

However, if you have installed Genymotion, like me, and it does not work with the updated Android Studio. In that case, if you don’t want to wipe everything and re-install them, you can follow my instructions at the end of the blog.

Step 2: Configure Android Studio & Genymotion

Open up AS, go to menu: File->Settings…

setting.png

In the panel, go to ‘Plugins’, and click ‘Browse repositories’

plugins.png

Type in ‘genym…’ to search the plugin for it, and install it:

genymotion-in-plugins

After installation, restart Android Studio, and you would see the button of Genymotion, besides, you can also press CTRL+SHIFT+A and type in genymotion to launch Genymotion device manager:

geny-device-mger.png

As I said above, I installed Genymotion before, and I just re-installed AS, so AS is not aware of Genymotion anymore, therefore in my case, after opening up the Genymotion Device Manager, I saw this dialog:

genymotion-path

It asks me to provide the installation path of Genymotion:

geny-path-sel.png

If you install Genymotion after AS, you won’t see that and don’t need to bother with that. We have done with AS settings, and now go to the setting of Genymotion, we also need to update the Android Studio SDK path in Genymotion’s setting panel:

AS-sdk-path-in-geny

Now, we can create and start device from Genymotion Device Manager, to test it, I just pick one from the previously created devices, and srart it:

start-device-in-geny

It starts successfully:

running-htc

And if we run the Android native app from Andriod Studio (remember I created one when first time opening up AS), we can choose the running device now, which means AS are connected to the virtual devices:

select-running-device

Go ahead and run the native sample app:

buggy-sample.png

Oops, too buggy.

However, the HTC One device runs Android 4.4.4, which seems not to support React Native, remember from the last blog that we have installed Android 6 particularly for React Native support.

So, we need to create a new device with Android 6. Let’s put the details of that in the next step.

Step 3: Create virtual device

I did that in Genymotion its own window, rather than the manager launched from AS. Hit ‘Add’ in the panel:

add-device.png

That brings up the setting panel:

select-devices.png

This is where your account comes into play, you need to log in an activated account to be able to see the of the available devices shown in the above screenshot. I chose Google Nexus 5, which runs Android 6.0.0:

name-devicefinished

Now change its settings as:

google-nex-setting.png

At least in my case, it is necessary to change the Network mode to Bridge. I also reduced the number of CPU processors and memory as my computer is sort of lame.

Step 4: Run React Native in Genymotion

Let’s launch Genymotion Device Manager from Android Studio, and start the newly created Google Nexus, after few minutes, it is all setup. With those things in place, let’s run the React Native project in the same way as I described in my last blog, and what happened was:

run-rn-fail.png

WHAT????

65613242.jpg

OK, the solution for me was pointed out here, thanks to Daniel Masarin, he has the credits.

Press CTRL+M, in the panel, click ‘Dev Settings’:

dev-swtting.png

And you will see:

server-host.png

Look for ‘Debug Server Host & Port for device’, click on it, and type in localhost:8081:

host-port.png

If you are wondering where this port number comes from, remember from the last setup blog that, when running react-native start, you would see:

┌───────────────────────────────────────────────┐

│ Running packager on port 8081.                                                                                          │

│                                                                                                                                                      │

│ Keep this packager running while developing on any JS projects. Feel    │

│ free to close this tab and run your own packager instance if you             │

│ prefer.                                                                                                                     │

│                                                                                                                                   │

https://github.com/facebook/react-native                                                   

│                                                                                                                               │

└───────────────────────────────────────────────┘

You need to stop the React Native building service, and run the commands react-native start and react-native run-android again in the two command prompts respectively to make it work:

succed.png

Setup VS Code For React Native

Nothing much in this section, just some handy plugins.

menuUntitled

Appendix: Fix previously created virtual devices in Genymotion

I have a previous version installed on my Windows, it is a little bit old.

Open it up:

first-openup-genymotion

Try to start the HTC One device, it fails:

fail-to-run-htc-one.png

According to the second video, you can just reinstall VirtualBox to fix it. I didn’t do that, because it used to work, and it probably has something to do with the settings as I have re-installed my Android Studio two days ago.

Open up VirtualBox:

virtual-box-startup

Start the HTC device:

error-in-vb.png

The problem is the Network setting, open up the setting panel, go to network tab, the below screenshot shows my settings for Adapter 1:

network-adpt1.png

And Adapter 2, it is very important to select the wifi adapter on your computer so that the virtual device can access the Internet:

network-adpt2

Start the device again from VB:

re-start-htc.png

This command line thing kept going for over 10 minutes at least, and finally displayed nothing but a blank black screen, so I just closed it.

Re-start the device from Genymotion:

htc-setting-geny.png

I can run it now, and I can access the internet as well:

run-htc-successfully-in-geny.png

Yeah, there you go.

As for the adapters and adapter types in the Network setting panel, you can refer to the links for details:

https://www.virtualbox.org/manual/ch06.html

https://askubuntu.com/questions/95022/which-type-of-virtualbox-networking-should-i-use

https://www.thomas-krenn.com/en/wiki/Network_Configuration_in_VirtualBox

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s