How to debug native react native libraries with Android Studio?

Question

This question is NOT ABOUT how to debug the javascript-land of an React-Native app. It is about how to debug native libraries (means: JAVA-Code in this case) in the node_modules-folder.

While it is very easy for me to debug native iOS-parts of RN-Applications with XCode, i stumbled upon various issues with Android Studio... The main thing is, that the node_modules-Folder is not present after importing the project into Studio, why it is not possible to setup breakpoints to debug thru.

Versions:

• Android Studio 2.2.2 (most recent version currently)
• react-native 0.38.0 (latest version also)
• gradle 1.3.1 (preconfigured from react-native init)
• also tried with upgrade to gradle 2.2.2
• Android SDKs and -Build Tools from up to Version 23 installed including NDK

How I did it / Steps to reproduce

1. create new react native project:

react-native init debugTest

2. install third party library with native code that you want to debug natively

cd debugTest && 
react-native install react-native-sqlite-storage

3. ensure that everything would work on android side:

• launch GenyMotion

• launch an AVD

• run the application with this command in terminal:

  react-native run-android

(this will open up packager and everything else that is needed to transfer the js-bundle). If one wants to omit this step, it is necessary to start the packager manually:

node node_modules/react-native/local-cli/cli.js start

4. launch Android Studio

• with the upcoming starter dialog, choose "Import Project"
• select the directory "android" of your project and click on "import" (these steps are taken from official RN-documentation):

If you want to use Android Studio to work on native code, from the Welcome screen of Android Studio choose "Import project" and select the android folder of your app.

5. Android Studio asks to update gradle version from pre-configured 1.3.2 to 2.2.2. I have first denied it for the whole workflow, later on i tried it out (both did not differ significantly for me)

6. One have to deactivate Instant Run due to this issue

7. Click on "Run" or "Debug" in the Toolbar of Android Studio

So far everything works fine. I was able to set a breakpoint in MainApplication.java::onCreate and could step into this method then.

But here are the questions:

1. The node_modules-Folder isn't present in Android Studio and can't be debugged this way. How to achieve that?

2. Debugging the onCreate-Method and going further down into the Java-Stack, very offen it happened that the "Sourcecode does not match the byte code".

The debugger was hanging somewhere else in comments of source code but not on exactly that line, which was selected to execute.

Android SDKs:

I have installed all SDKs and build tools and NDK and everything else since version 23:

TL;DR:

How to debug native libraries that are present in node_modules-Folder of an react native application with Android Studio, because they are not visible in AS thus no breakpoint could be passed?

UPDATE

Finally i've found out the root cause. For me it wasn't working due to the fact, that the library i wanted to debug, wasn't shown in Android Studio. But this was a mistake by myself because the library wasn't setup correctly, why gradle wasn't able to take notice of it.

So, this question can be used like a blog post how to do it right (and will be sufficient if the 3rd party library works out of the box with "rnpm-link" or "react-native link") [which wasn't the case here in my example]

Answer 1

Bam.... i can answer my first of the two questions now by myself. Thx to @agent_hunt, who put me into the right direction...

In this example application the bindings wasn't setup correctly. "rnpm link" and the newer one "react-native link", which is part of "react-native install", didn't worked correctly here for the android-part because it is not implemented in the 3rd-party-library right now, that i've used for this example.

That's why gradle didn't take notice of the library. After setting it up correctly, the folder react-native-sqlite-storage appeared in Android Studio and i was able to pass a breakpoint and to stop the execution there.

Nevertheless, debugging this library works fine, but when i wan't to step into lower/"deeper" methods of android SDK, it still has issues to point to the correct line of code ("Sourcecode does not match the byte code")

Answer 2

Have you done rnpm link or react-native link ? Once you do that, there will be additional modules along with the app module, something like this.

You can look at all the java code in the native module and put breakdpoints , debug etc.