Building React Native From Source (Android)

The recent release of cycle of React Native had a few breaks in it, it got me thinking, wouldn’t it be great to build from source? So I dived into the docs to figure out whether I could, but it didn’t take me long before I got stuck. What I thought would be an hour or two’s work turned into a full-day project.

In the end I found the docs were missing the finer details. In this guide, I’ll show you a few of the critical steps (assuming you have a new React Native application ejected and compiling).

The official docs provide decent instructions on this.

Once running on Android Studio with the default react-native screen:

Now we can get into the fun stuff!

There are two options for this: build source from react native Github repo, or clone it down and link it with Yarn. We’re going to do the first option.

Start off by replacing our react native version with master on Github:

yarn add github:facebook/react-native#master

Now we can open up Android Studio and make a few changes to get it to build.

I found instant-run on Android Studio 3.1 gave errors, so we should turn this off to get our project to build:

Now back to the docs we need to set up the ndk,

Download the appropriate NDK:

• MacOS
• Linux

Now in android studio, edit our local.properties:

sdk.dir=/Users/your_unix_name/android-sdk-macosx ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e

In android/build.gradle add:

dependencies {         
  classpath 'com.android.tools.build:gradle:1.3.1'         
  classpath 'de.undercouch:gradle-download-task:3.1.2'//<== this one
}

Now in android/settings.gradle add:

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

Now we need to make our app use the build version of react native:

... 
dependencies {     
  compile fileTree(dir: 'libs', include: ['*.jar'])     
  compile 'com.android.support:appcompat-v7:26.0.2'      
  compile project(':ReactAndroid')      
  ... 
}
...

Finally we need to make our modules use the build version of react-native:

configurations.all {     
 exclude group: 'com.facebook.react', module: 'react-native' 
}

Now in a terminal in our repo, make sure you have a bundler running:

yarn start

Now we’ll need to sync Gradle in Android Studio. It will typically prompt you, but if it doesn’t, under file=> sync Gradle, wait for this to complete then click the green arrow. Once done, you’ll get a prompt to have an emulator running and it will build. Expect it to take anywhere up to 4 minutes.

After this, we should have a successful build!

One thing I found was when using Gradle 3+ there was an issue getting “configurations.all” to be used by all modules. The only way I could get around this was to go into each of the node_modules and edit the

api "com.facebook.react:react-native:+"

to use

compileOnly project(':ReactAndroid')

I’m still investigating why it doesn’t work, stay tuned or drop me a comment if you have any ideas why.

Now that’s all fine, but what if we had a bug we wanted to fix or add a new feature to react-native?

We’ll have the answers for you next time.

Stay tuned.

Happy coding :)