Bundling React Native during Android release builds
Cross posted here:
We’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.
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
This is tedious and error prone, and where to get the react.gradle file (or what it should contain) is not mentioned.
How do we properly hook the bundling task into the normal build process?
Thankfully newer versions of React Native support a better approach.
Looking into the react-native directory reveals a Gradle file that defines a bundling task. This is the react.gradle file that is mentioned in the docs.
We just need to hook this Gradle file into our existing build process.
The linked page below describes how to properly build a signed apk:
And notice this:
“If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at
android/app/build.gradleto see how you can update it to reflect these changes.”
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.gradlefile.
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
debugorreleasebuilds - the path to your React Native project directory
- the js bundle directory path
- and more…
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.
Our config:
// Configures the bundleJS commands for React-Native
project.ext.react = [ // whether to bundle JS and assets in debug mode
bundleInDebug: false,// whether to bundle JS and assets in release mode
bundleInRelease: true, // the root of your RN project, i.e. where "package.json" lives
root: "path_to_rn_project_directory"
]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.
There is one last important note to be aware of. From the React Native documentation:
Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make release build skip bundling JS and assets into the APK
To get started with React Native check out the links below:
Follow Us
For more from the engineers and data scientists building Udacity, follow us here on Medium.
Interested in joining us @udacity? See our current opportunities.
