React Native On Android Without Issue

React Native On Android Without Issue

Building apps for mobile can often cause issues. Using a react-native setup can make it easier, but adding Android support can add different problems. All you need has been compiled into this article, explaining as we go. We will cover the process, errors, issues, as well as how to build react-native Android apps.

Building for Android

This is where things can start to get a bit complicated if you are completely new to the platform. It’s not too bad when everything is laid out, and you are aware of what can come up. If you have not taken the time already, going though Facebook’s guide to setting up for Android is a great idea. Once you have all of those boxes checked, you will have the basic platform you need to create react-native apps.

So with that said, let’s look at what is going on, what can happen, and what to do to prevent bad things from happening.

Commands to Know

Before we get started, I wanted to lay out a very helpful list of commands needed for Android development with react-native.

android avd   # Start AVD Manager
android sdk    # Start SDK Manager 
adb devices     # Check available devices 
adb install <package>  # Install package to device  
adb start-server   # start adb server 
adb kill-server    # stop adb servere 
adb reverse tcp:8081 tcp:8081  # reverse server traffic to send to emulator (Android OS 5.0+) 
adb shell input keyevent 82 # send "shake" to device for dev options
emulator -avd <avd name>   # Start avd emulator with name <avd name> 
emulator -list-avds    # list available avds

This list makes up of every single common command you’ll use when building for Android.

React Native on Android

Type ‘react-native run android‘ in your project folder, and everything will work. Unfortunately, this isn’t always the case. To understand what is happening, we ill check to make sure everything is working like it should.

Watchman Homebrew not npm

For OSX, you will want to make sure to use the homebrew version of Watchman. Installing from the Node Package Manager will cause errors. If you do not, you will see errors from the react-native packager.

Watch your AVDs

When you create a new AVD, be sure to increase the size of the configure screen. It does not show the entire configuration screen, usually where you find other options. The most important errors and warnings about your configuration are shown here. Mentions like, issues with certain system image. or a lack of a matching ABI. These sdk packages can be easily overlooked, and finding them can be a chore. We will discuss this more in a minute.

Android SDK Path

Make sure you set your SDK path with the ANDROID_HOME variable before you create a project. When creating a new project using ‘react-native init’, you can receive errors that the SDK is missing. When this happens, set the path explicitly. Make an ‘/android/local.properties’ file, and add:

sdk.dir = /path/to/the/android/sdk

Change the directory to the correct directory.

In OSX we also want to make sure our path exports are set accordingly. This is mentioned in the React-Native docs mentioned earlier, but I also found where the exports didn’t always load on startup. To remedy this issue you can add the following to the .bash_profile in your home folder to make sure that the .bashrc contents load flawlessly. If it doesn’t exist, simply create it with the following code:

~/.bash_profile

[[ -s ~/.bashrc ]] && source ~/.bashrc

Android APK APIs

Using the SDK Manager you can find a lot of different API packages, tools, and various ABIs to simulate all sorts of Android environments. To gain access to this repository of packages you can open the SDK Manager using Android Studio’s Splash Screen and going to Configure > SDK Manager. The thing that can trip people up, and it did me, is that it doesn’t show everything by default! I’m sure this is to reduce the amount of noise, and simplifying the install process, but que sera sera.

When you are missing packages, but swear you installed everything you needed, it’s probably because you missed something only shown in the Standalone SDK Manager list. In the Android Studio SDK Manager, you can actually find a button that takes you straight there. If you look below the list, there is an option to Launch Standalone SDK Manager, which will show all of the packages. You can also check the box on the right that says Show Package Details, which will give you more options to choose from. For a more straight-forward approach, you can also run the standalone manager by running android sdk in the Terminal or Command Prompt.

Remember when we talked about making it easier to get the packages for AVDs? You can actually use Android Studio’s AVD Manager to make sure you have everything needed when starting and creating AVDs. Unlike the standalone AVD Manager, The Studio’s AVD Manager will tell you when you’re missing ABIs, or SDK packages needed to run correctly, and when making a new profile it will not allow you to continue with the profile if it doesn’t have the packages needed to run correctly. This can certainly help you make sure that you have everything you need for your emulators, and builds.

React-Native Errors

When running the ‘react-native run-android –debug’ command to build, you can run into some common errors:

No online devices found: The emulator cannot be found, or the emulator is not running. Verify its existence using ‘adb devices‘ to list available devices.

ShellCommandUnresponsiveException: This happens on the app:installDebug module process, and means communication with the emulator is not sound. I’m being vague, because so is the error, and what needs to be fixed. This can be due to the avd device not having the correct packages to run. This can also happen when gradle is using an incompatible version.

The ShellCommandUnresponsiveException is a generic error, and happens for many different things. You can count on it having to do with the device it’s contacting. I myself ran into an issue where it gave an error that it could not find an emulator that could handle density -1, with the current ABI. No matter what it would never work with the emulator. This is discussed in its own section below.

If the Build Fails On App

If for some reason your build fails on the :app, you may not see much of an error. To get a distinct error, compile it by hand. Go into the android folder and run:

Project/Android:> ./gradlew app --debug

Running the gradle script for ‘app’ with the –debug flag, will show all of the errors that happen during the process. Using –info, and –stacktrace flags can fit your needs a bit more.

If the Build Fails on InstallDebug

Well-known issues exist in the installDebug process, where it sends the compiled package to the device. It will output a generic error, so compiling manually will give more errors, but the reason is often emulator related. If everything mentioned above is fine, but installDebug still fails, try installing manually. This way you skip this step, and continue on your own.

Since the script made it this far, we at least know the package has been compiled. So we can install manually with the following, and move forward:

Project/:> adb install android/app/build/outputs/apk/debug.apk

This will install the apk package to the available device, and continue where you left off. If for some reason the AVD has issues with execution (starting the app), you can go to the emulator’s app list, and start the uploaded APK.

Target Version

Just because the tools and platform tools are newer API versions, that doesn’t mean the target OS has to match that. Different versions can offer better multi-architecture support, and provide quicker loading, but introduce issues. You may need to manually install and execute when running versions above 4.2, assuming they do start.

There are ways to make later versions work, but if it’s taking too much time, and you don’t need a specific version, go with an older version you know works.

HAXM Compatibility

The HAXM driver is used with Intel CPUs to help emulate x86 CPUs. When emulators did not work on older systems, it was often due to the Intel HAXM driver. The can be due to the CPU, but the latest Intel’s 6.0.3 driver, which now comes stock with the SDK for OSX, works just fine.

Some Core2Duo users have had issues with HAXM, but once updated, worked perfectly fine. You can also install Windows via Bootcamp to work around this as well.

React Native Android Emulators

There are three alternatives that all work well when the official does not. The only downfall from these three are they are all AOS Jellybean, but that won’t keep you from making anything.

Bluestacks: is a great emulator for Android games on your PC and Mac. Bluestacks 2 is available for Windows, offering a portrait view, and keystrokes for actions like “shake”. Starting the emulator shows a new device in the adb device list. You can upload apks right to Bluestacks to test them out.

Droid 4x: geared towards gaming, Droid4x is similar to Bluestacks. It also offers a subscription service to run Android apps on iOS. With some downsides, it’s very well put together. Unfortunately the device doesn’t show in the device list, but does have an option to install APKs.

AndyOS: AndyOS is another VirtualBox-based emulator. It requires that you have the VirtualBox stand-alone installed, and it takes a lot of CPU getting started. Crashing with a gray screen error can happen on the first run. Besides that, it runs a lot like the android AVD, in a sense of needing initialization on start. For me, it took 20 minutes to see this initialization finish, but it made for a great emulator after that.

Since debugging is on by default, it’s another emulator that shows in the device list to upload to. AndyOS gives a full Android OS, and not lacking in options like the other two. Having these features makes this a great emulator for development, and a replacement for AVDs all together. 

What about Genymotion?

I know many suggest Genymotion as an AVD replacement, but in my current experience it doesn’t work for every system. Even being another VirtualBox setup, it refuses to work on my system at all. This could be a 10.11 issue, or a Core2Duo issue, but I certainly cannot speask about it when it won’t run on my system at all.

Moving Forward

Once you get your app running in an emulator, you will usually be presented with a red screen and an error complaining about not seeing the development server. The general cause for this is needing to send data back in the opposite direction, and we can do this when you run the reverse command to reverse the data flow. Reload, and check out your running application!

> adb reverse tcp:8081 tcp:8081

If you are using an emulator with AOS older than 5.0, the reverse isn’t going to help. Instead we need to access the adb server. For emulators that do not have a shake button or hotkey, you can send the key event to the device manually.

> adb shell input keyevent 82

Now we can go to the Dev Settings, and choose the Debug server host * port for device option. In this option we can use the IP address of our machine, which we can find in the terminal using the ifconfig command in Linux and OSX, or in the Windows Command Prompt (cmd) using ipconfig. You should find the IP address starting with 192.168, or 10.[0-255], but most likely the first. For instance for my system I’m using: 192.168.1.105:8081 . After that’s set go back to the application, send another shake command, and then click reload. You’ll start seeing the react-native package manager doing some work, and then see a message on your emulator, “Fetching JS Bundle”. Sit back, and get ready for your app to load!

We should now have a working app running on our emulator, and all the knowledge needed to do it all again when we need to!

Conclusion

So now that we’ve gone through the entire process, and have seen what is needed to get your react-native apps working on Android no matter what the situation, I hope that this answers a lot of questions. If you still have questions, please feel free to ask below, and I’ll be happy to answer them, and maybe add them to the article.

 android react-native