How to debug native react native libraries with Android Studio?
<p>This question is <strong>NOT ABOUT how to debug the javascript-land</strong> of an React-Native app. It is about how to debug <strong>native libraries</strong> (means: JAVA-Code in this case) in the node_modules-folder.</p>
<p>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.</p>
<h1>Versions:</h1>
<ul>
<li>Android Studio 2.2.2 (most recent version currently)</li>
<li>react-native 0.38.0 (latest version also)</li>
<li>gradle 1.3.1 (preconfigured from react-native init)</li>
<li>also tried with upgrade to gradle 2.2.2</li>
<li>Android SDKs and -Build Tools from up to Version 23 installed including NDK</li>
</ul>
<h1>How I did it / Steps to reproduce</h1>
<p><strong>1. create new react native project:</strong></p>
<pre><code>react-native init debugTest
</code></pre>
<p><strong>2. install third party library with native code that you want to debug natively</strong></p>
<pre><code>cd debugTest &amp;&amp; 
react-native install react-native-sqlite-storage
</code></pre>
<p><strong>3. ensure that everything would work on android side:</strong></p>
<ul>
<li><p>launch GenyMotion</p>
</li>
<li><p>launch an AVD</p>
</li>
<li><p>run the application with this command in terminal:</p>
<blockquote>
<p>react-native run-android</p>
</blockquote>
</li>
</ul>
<p>(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:</p>
<pre><code>node node_modules/react-native/local-cli/cli.js start
</code></pre>
<p><strong>4. launch Android Studio</strong></p>
<ul>
<li>with the upcoming starter dialog, choose &quot;Import Project&quot;</li>
<li>select the directory &quot;android&quot; of your project and click on &quot;import&quot;
(these steps are taken from <a href="http://facebook.github.io/react-native/releases/0.23/docs/android-setup.html" rel="noreferrer">official RN-documentation</a>):</li>
</ul>
<blockquote>
<p>If you want to use Android Studio to work on native code, from the
Welcome screen of Android Studio choose &quot;Import project&quot; and select
the android folder of your app.</p>
</blockquote>
<p><strong>5. Android Studio asks to update gradle version</strong> 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)</p>
<p><strong>6.</strong> One have to deactivate <strong>Instant Run</strong> due to <a href="https://stackoverflow.com/questions/39591531/unsupported-method-androidproject-getplugingeneration-while-running-project">this issue</a></p>
<p><strong>7. Click on &quot;Run&quot; or &quot;Debug&quot;</strong> in the Toolbar of Android Studio</p>
<p>So far everything works fine. I was able to set a breakpoint in MainApplication.java::onCreate and could step into this method then.</p>
<h1>But here are the questions:</h1>
<ol>
<li>The <strong>node_modules-Folder isn't present</strong> in Android Studio and can't be debugged this way. How to achieve that?</li>
</ol>
<p><a href="https://i.stack.imgur.com/xCC7l.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xCC7l.png" alt="enter image description here" /></a></p>
<ol start="2">
<li>Debugging the onCreate-Method and going further down into the Java-Stack, very offen it happened that the <strong>&quot;Sourcecode does not match the byte code&quot;</strong>.</li>
</ol>
<p><a href="https://i.stack.imgur.com/wBKeQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wBKeQ.png" alt="enter image description here" /></a></p>
<p>The debugger was hanging somewhere else in comments of source code but not on exactly that line, which was selected to execute.</p>
<h1>Android SDKs:</h1>
<p>I have installed all SDKs and build tools and NDK and everything else since version 23:</p>
<p><a href="https://i.stack.imgur.com/DWty7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DWty7.png" alt="enter image description here" /></a>
<a href="https://i.stack.imgur.com/RPRNM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RPRNM.png" alt="enter image description here" /></a></p>
<h1>TL;DR:</h1>
<p>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?</p>
<h1>UPDATE</h1>
<p>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.</p>
<p>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 &quot;rnpm-link&quot; or &quot;react-native link&quot;) [which wasn't the case here in my example]</p>