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:
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…
In the panel, go to ‘Plugins’, and click ‘Browse repositories’
Type in ‘genym…’ to search the plugin for it, and install it:
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:
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:
It asks me to provide the installation path of Genymotion:
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:
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:
It starts successfully:
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:
Go ahead and run the native sample app:
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:
That brings up the setting panel:
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:
Now change its settings as:
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:
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’:
And you will see:
Look for ‘Debug Server Host & Port for device’, click on it, and type in localhost:8081:
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:
Setup VS Code For React Native
Nothing much in this section, just some handy plugins.
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:
Try to start the HTC One device, it fails:
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:
Start the HTC device:
The problem is the Network setting, open up the setting panel, go to network tab, the below screenshot shows my settings for Adapter 1:
And Adapter 2, it is very important to select the wifi adapter on your computer so that the virtual device can access the Internet:
Start the device again from VB:
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:
I can run it now, and I can access the internet as well:
Yeah, there you go.
As for the adapters and adapter types in the Network setting panel, you can refer to the links for details: