Contributing to React Native for Android

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

cd /somewhere
wget http://dl.google.com/android/ndk/android-ndk-r10e-linux-x86_64.bin
chmod a+x android-ndk-r10e-linux-x86_64.bin
./android-ndk-r10e-linux-x86_64.bin
export ANDROID_NDK=/somewhere/android-ndk-r10e

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

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"

    compile "com.facebook.react:react-native:0.17.+"
}

See, 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:

1

compile project(':ReactAndroid')

then open 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

include ':ReactAndroid'

project(':ReactAndroid').projectDir = new File(
    rootProject.projectDir, '../node_modules/react-native/ReactAndroid')

Last but not least, you will need 1 change in android/build.gradle, in the dependencies section:

1

classpath 'de.undercouch:gradle-download-task:2.0.0'

That’s it!

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 ./node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/ and start hacking around, making your own changes and testing them with a simple react-native run-android.

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 webviews¹.