It is no news that we, at Namshi, like to play around with all sorts of interesting technologies: last but not least, we’re taking a closer look at react native, the framework from Facebook that allows you to build mobile, native apps with React components.
While developing a small prototype, we had a small issue with a WebView that was supposed to run within our application and wanted to enable remote debugging on chrome to troubleshoot it: since this is turned off by default, we had to recompile react native with webview debugging enabled, and I wanted to share my brief experience with it since, with the same approach, you can start hacking and contributing to react native itself.
The guys have created a small guide on how to compile RN from source, which can be summarized in just a couple steps: first, add the android NDK to your environment and then configure the build system to build from source and not from the pre-built react-native packages.
Download and configure the Android NDK
Download the latest version of the NDK, make it executable and run it: the package extracts itself in the current folder and then you only need to set an environment variable pointing to the NDK, so that the android build system will be able to locate the NDK:
1 2 3 4 5
Configure RN to build from source
This involves a few manual steps, but should be pretty straightforward.
In your react project, open
android/app/build.gradle, you should see a
dependencies section like the following:
1 2 3 4 5 6
compile "com.facebook.react:react-native:0.17.+" tells the build system
to get the pre-built packages, released by facebook, rather that building react-native
from your local sources.
Now, change that line to:
android/settings.gradle and tell the build system how to locate
the new project that will be compiled; add, at the bottom of the file:
1 2 3 4
Last but not least, you will need 1 change in
android/build.gradle, in the
At the end
Now, when you run
react-native run-android, you should notice that the
build is slightly slower, due to the fact that gradle
is trying to compile RN from source rather than from the pre-built packages.
You can then open
and start hacking around, making your own changes and testing them with a simple
For us, we were eventually able to enable remote debugging on webviews and found out why our webview wasn’t running: it simply needed access to the localStorage, which is turned off by default on android webviews1.
- We then sent a PR (https://github.com/facebook/react-native/commit/67931284350ebd2b60d1e11870690272079b1726) so that we can turn DOM storage on at will ;-) ↩