removed React Native from our codebase… – decreased apk size 35% 👍 – decreased build time ~20% 👍 – decreased number of languages required to fully understand/work on the project 👍 probably my favorite PR merge in a while 😃
As a result of the responses to that tweet, I decided to write a retrospective on our usage of React Native on the mobile-engineering team at Udacity.
I’ve spent some time recently incorporating React Native components into our existing app
This comes with the extra requirement of release builds requiring the creation of the bundle file
I would have expected this to be a straightforward, well documented workflow, but was unfortunately a bit disappointed. It took a bit of digging, along with some trial and error, to finally automate the bundling process within our release builds.
Older versions of React Native’s docs (0.19) recommended running the bundling command manually before building your app if you don’t have a react.gradle file
It hints at where to look, but doesn’t do a great job of indicating how to actually configure the project.
Again, the sample project is the key
Look at the sample app’s build.gradle file
Notice the config section
* The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
* and bundleReleaseJsAndAssets).
* These basically call `react-native bundle` with the correct arguments during the Android build
* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
* bundle directly from the development server. Below you can see all the possible configurations
* and their defaults. If you decide to add a configuration block, make sure to add it before the
* `apply from: "../../node_modules/react-native/react.gradle"` line.
* project.ext.react = [
* // the name of the generated asset file containing your JS bundle
* bundleAssetName: "index.android.bundle",
* // the entry file for bundle generation
* entryFile: "index.android.js",
* // whether to bundle JS and assets in debug mode
* bundleInDebug: false,
These values allow the customization of the bundle task behavior including:
whether to bundle in debug or release builds
the path to your React Native project directory
the js bundle directory path
By customizing these config values in our top level app/build.gradle file, we were able to hook into the bundling command on all our release builds
// Configures the bundleJS commands for React-Native
project.ext.react = [
// whether to bundle JS and assets in debug mode
// whether to bundle JS and assets in release mode
// the root of your RN project, i.e. where "package.json" lives
apply from: "<path to RN project>/node_modules/react-native/react.gradle"
With this, we can correctly build our signed, release apk with the required React Native js bundle intact
To get started with React Native check out the links below