react-native-dynamic-bundle is a library, similar to react-native-auto-updater and CodePush, that allows you to change the React Native bundle loaded by an application without updating the application itself (i.e. through the App Store or Google Play). You could use this functionality to, for example:
- Get app updates to users quicker.
- Make A/B-testing or gradual rollouts as easy as on the web.
react-native-dynamic-bundle differs from react-native-auto-updater and alternatives in that it does not attempt to be a complete solution, only providing the bare necessities for switching bundles and reloading the app. This requires you to implement the logic to download and keep track of the bundles yourself, but does give you complete freedom in how you implement your updater or A/B testing logic.
- Explanations of how to set it up on the native side. In the meanwhile have a look at AppDelegate.m for iOS and MainActivity.java / MainApplication.java for Android.
$ npm install react-native-dynamic-bundle --save
or
$ yarn add react-native-dynamic-bundle
$ react-native link react-native-dynamic-bundle
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-dynamic-bundle
and addRNDynamicBundle.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNDynamicBundle.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import org.mauritsd.reactnativedynamicbundle.RNDynamicBundlePackage;
to the imports at the top of the file - Add
new RNDynamicBundlePackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-dynamic-bundle' project(':react-native-dynamic-bundle').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dynamic-bundle/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-dynamic-bundle')
import {
setActiveBundle,
registerBundle,
unregisterBundle,
reloadBundle
} from 'react-native-dynamic-bundle';
/* Register a bundle in the documents directory of the app. This could be
* pre-packaged in your app, downloaded over http, etc. Paths are relative
* to your documents directory.
*/
registerBundle('a_b_test', 'bundles/a_b_test.bundle');
/* Set the active bundle to a_b_test. This means that on the next load
* this bundle will be loaded instead of the default.
*/
setActiveBundle('a_b_test');
/* Unregister a bundle once you're done with it. Note that you will have to
* remove the file yourself.
*/
unregisterBundle('a_b_test');
/* In some circumstances (e.g. the user consents to an update) we want to
* force a bundle reload instead of waiting until the next app restart.
* Note that this will have to result in the destruction of the current
* RCTBridge and its recreation with the new bundle URL. It is therefore
* recommended to sync data and let actions complete before calling this.
*/
reloadBundle();