Skip to content

Control which bundle is loaded from the Javascript side of your React Native app.

Notifications You must be signed in to change notification settings

ChromaPDX/react-native-dynamic-bundle

 
 

Repository files navigation

react-native-dynamic-bundle

What is this?

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.

To do's

  • 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.

Getting started

$ npm install react-native-dynamic-bundle --save

or

$ yarn add react-native-dynamic-bundle

Mostly automatic installation

$ react-native link react-native-dynamic-bundle

Manual installation

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-dynamic-bundle and add RNDynamicBundle.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNDynamicBundle.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Android

  1. 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 the getPackages() method
  1. 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')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':react-native-dynamic-bundle')
    

Usage

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();

About

Control which bundle is loaded from the Javascript side of your React Native app.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Objective-C 38.3%
  • Java 27.4%
  • JavaScript 15.7%
  • Ruby 12.0%
  • Starlark 6.6%