react-native-ota-hot-update

A React Native module that allows you to control hot update same as Code Push, less config than Code Push, you can control version manager, hosting bundle js by your self, this library just control install the hot update after bundle js downloaded from your side. As we know, Code push is going to retirement soon, that why i create that library for you can control bundle js from your backend side.

iOS GIF | Android GIF :-------------------------:|:-------------------------: |

New architecture supported

New architecture backward compatibility supported from version 2, it also supported old architecture, for source code of version 1.x.x please refer to branch oldArch, you might need install version 1.x.x if you are using react native < 0.70

Installation

if you don't want to manage the download progress, need to install blob util together:

yarn add react-native-ota-hot-update && yarn add react-native-blob-util

Auto linking already, need pod install for ios:

cd ios && pod install

IOS

Open AppDelegate.m and add this:

#import "OtaHotUpdate.h"
...
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [OtaHotUpdate getBundle]; ## add this line
#endif
}

For downloading in background mode on IOS, following this (optional):

AppDelegate.h:

@property (nonatomic, assign) UIBackgroundTaskIdentifier taskIdentifier;

AppDelegate.mm:

- (void)applicationWillResignActive:(UIApplication *)application {
   if (self.taskIdentifier != UIBackgroundTaskInvalid) {
      [application endBackgroundTask:self.taskIdentifier];
      self.taskIdentifier = UIBackgroundTaskInvalid;
   }

   __weak AppDelegate *weakSelf = self;
   self.taskIdentifier = [application beginBackgroundTaskWithName:nil expirationHandler:^{
      if (weakSelf) {
          [application endBackgroundTask:weakSelf.taskIdentifier];
          weakSelf.taskIdentifier = UIBackgroundTaskInvalid;
      }
   }];
}

Android

Open MainApplication.java/kt and add these codes bellow:

import com.otahotupdate.OtaHotUpdate
...
override fun getJSBundleFile(): String? {
    return OtaHotUpdate.bundleJS
}

Open AndroidManifest.xml :

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

<application ... android:requestLegacyExternalStorage="true"

That's it, can check the example code

Remember hot update just work at release mode, debug mode won't working

Here is the guideline to control bundle js by yourself, in here i am using Firebase storage to store bundlejs file and a json file that announce new version is comming:

1.Add these script into your package.json to export bundlejs file and source map file:

• For react native CLI:

"scripts": {
  "export-android": "mkdir -p android/output && react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/output/index.android.bundle --assets-dest android/output --sourcemap-output android/sourcemap.js && cd android && find output -type f | zip index.android.bundle.zip -@ && zip sourcemap.zip sourcemap.js && cd .. && rm -rf android/output && rm -rf android/sourcemap.js",
  "export-ios": "mkdir -p ios/output && react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/output/main.jsbundle --assets-dest ios/output --sourcemap-output ios/sourcemap.js && cd ios && find output -type f | zip main.jsbundle.zip -@ && zip sourcemap.zip sourcemap.js && cd .. && rm -rf ios/output && rm -rf ios/sourcemap.js"
}

• For expo / expo bare project:

"scripts": {
  "export-android": "mkdir -p android/output && npx expo export:embed --platform android --entry-file node_modules/expo/AppEntry.js --bundle-output android/output/index.android.bundle --dev false  --assets-dest android/output --sourcemap-output android/sourcemap.js && cd android && find output -type f | zip index.android.bundle.zip -@ && zip sourcemap.zip sourcemap.js && cd .. && rm -rf android/output && rm -rf android/sourcemap.js",
  "export-ios": "mkdir -p ios/output && npx expo export:embed --platform ios --entry-file node_modules/expo/AppEntry.js --bundle-output ios/output/main.jsbundle --dev false  --assets-dest ios/output --sourcemap-output ios/sourcemap.js && cd ios && find output -type f | zip main.jsbundle.zip -@ && zip sourcemap.zip sourcemap.js && cd .. && rm -rf ios/output && rm -rf ios/sourcemap.js"
}

For expo you might need check path of --entry-file node_modules/expo/AppEntry.js, get it from package.json / main

These commands are export bundle file and source map file then compress it as a zip file, one for android and one for ios. You can create your own script that export and auto upload to your server. For source map file you can ignore or use that with your purpose to debug in release mode.

Then create an json file: update.json like that:

{
  "version": 1,
  "downloadAndroidUrl": "https://firebasestorage.googleapis.com/v0/b/ota-demo-68f38.appspot.com/o/index.android.bundle.zip?alt=media",
  "downloadIosUrl": "https://firebasestorage.googleapis.com/v0/b/ota-demo-68f38.appspot.com/o/main.jsbundle.zip?alt=media"
}

Then upload your bundlejs files to firebase storage, totally will look like that:

After you have done everything related to version manager, you just handle the way to update new version like fetch update.json as api to get download url and call this function:

    import hotUpdate from 'react-native-ota-hot-update';
    import ReactNativeBlobUtil from 'react-native-blob-util';


    hotUpdate.downloadBundleUri(ReactNativeBlobUtil, url, version, {
      updateSuccess: () => {
        console.log('update success!');
      },
      updateFail(message?: string) {
        Alert.alert('Update failed!', message, [
          {
            text: 'Cancel',
            onPress: () => console.log('Cancel Pressed'),
            style: 'cancel',
          },
        ]);
      },
      restartAfterInstall: true,
    });

The important thing: this library will control version by it self, need always pass version as parameter in downloadBundleUri, it will storage as a cache and use this to check whether need update version in the next time. Default of version is 0

Tips for manage bundles

In this demo project i have used firebase storage to control the bundles and version, but that is not useful. I would like to suggest you to use some CMS to control the bundles. For CMS, it has a lot open sources, now i am using strapi CMS to control the version, i also create auto release script like code push and can integrate with CI/CD. Here is some screenshot of strapi CMS:

Beside strapi you can also try craftcms, payloadcms... You can refer folder sampleComponent, it has the logic of update with CMS and also include script auto upload the bundle to CMS. Contact me via email if you want to implement hot update via CMS (need service fee)

Functions

| key | Return | Action | Parameters | | ------------ |--------|------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------| | downloadBundleUri | void | Download bundle and install it | (downloadManager: DownloadManager, uri: string, version: number, option?: UpdateOption) | | setupBundlePath | boolean | Install your bundle path if you control the downloading by your self, ignore that if you use downloadBundleUri | path: string, the path of bundlejs file that you downloaded before | | removeUpdate | void | Remove you update and use the previos version | restartAfterRemoved?: boolean, restart to apply your changing | | resetApp | void | Restart the app to apply the changing | empty | | getCurrentVersion | number | Get the current version that let you use to compare and control the logic updating | empty | | setCurrentVersion | boolean | Set the current version that let you use to compare and control the logic updating | version: number |

UpdateOption

| Option | Required | Type | Description | |-------------------------|----------|----------|--------------------------------------------------------------------------------------------------| | headers | No | Object | The header to down load your uri bundle file if need token/authentication... | | updateSuccess | No | Callback | Will trigger when install update success | | updateFail(message: string) | No | Callback | Will trigger when install update failed | | restartAfterInstall | No | boolean | default is false, if true will restart the app after install success to apply the new change | | progress | No | void | A callback to show progress when downloading bundle | | extensionBundle | No | string | extension of bundle js file, default is .bundle for android, ios is .jsbundle |

DownloadManager

The same method as react-native-blob-util or rn-fetch-blob

License

MIT