Debugging react native android app running on a chromebook

As you might know already android apps can be installed on chromebooks since a very long time, exploring a new avenue for app development is always exciting and challenging.

Lately I had an opportunity to do the same and here I’ll try to sum up the steps to debug a react-native android app on chromebook.

Device requirement

Make you have chromebook with ≥64GB, since the chromeOS would take up around 20GB of space when you enable the Linux development environment(Beta) it requires around 7.5GB to 10GB of space and we’ll end up deleting existing apps to make space.

Steps

• First you’ll need to enable Developer mode on your chromebook, you can follow this link to enable the developer mode.
• Once you are in the developer mode, you’ll have to setup your device from the start, the usual flow where you’ll need to login.
• After logging in go to Settings → Advanced → Developers → Linux development environment ( Follow the screen to complete the installation )

• Now we need to enable ADB debugging -
  Settings → Advanced → Developers → Linux development environment (Beta) → Develop Android Apps → Enable ADB debugging ( You’ll be asked to restart and continue, just follow the screen after restart )

• If you are familiar with the debugging android app on actual devices, it is pretty common you would think that you could just connect the chromebook to your workstation using a USB cable and debug it just like any other android device but there is a major caveat in chromebooks. There are only 4 devices available in all chromebooks which support USB debugging ( source ). I just find this bizarre.

• So if incase if you don’t have any of the above devices we can install the APK using 2 methods
  Method 1 —
  You can create a debug APK and download it on chromebook and install it using adb commands. I feel this is a bit cumbersome, I prefer using the method 2
  Method 2 —
  1. Get the IP of your chromebook from settings.
  2. Using following adb command you can connect your workstation to your chromebook wirelessly adb connect <Chromebook IP>:5555
• Once connected you will be able to detect it on your Android studio device drop down, my device is detected as Google octopus

Now you can run the debug app directly on your chromebook wirelessly.

“ I just have connect to the metro bundler by entering the workstation’s IP into the app by opening developer menu but in order to open the developer menu you’ll need to shake the device and chromebook doesn’t have a gyroscope to detect the shake.”

Yup that’s exactly how I thought when I trying it out for the first time.
In order to connect to the metro bundler just run the following command in your console — adb reverse tcp:8081 tcp:8081

Once you run the above command your chromebook would be connected to you metro bundler and you can debug it just like any other android device.

Hope this helps fellow developers to save sometime.
Cheers!