code-send-plugin

Plugin for implementing hot code update with react native using code send platform

1. Setup

1. Install code send plugin and react native geolocation for implementing regional update

$ npm install code-send-plugin @react-native-community/geolocation

2. Link package

$ npx react-native link code-send-plugin @react-native-community/geolocation

3. Add Permission to access geolocation and file system to store bundle on AndroidManifest.xml

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

4. Add bundle resolver in react native host in android/app/src/main/java/com/packageName/MainApplication.java

package com.packageName;

import android.app.Application;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.List;
import com.reactlibrary.CodeSendModule; // import CodeSendModule

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }

        // add this method to load bundle from code send platform
        @Nullable
        @Override
        protected String getJSBundleFile() {
            return CodeSendModule.launchResolveBundlePath(MainApplication.this);
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }
}

5. Use code send hook to automatically check for update when application start. You can get projectId by creating a project on code send platform

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { useCodeSend } from "code-send"; // import useCodeSend hook

const App = () => {
  // run useCodeSend hook
  useCodeSend("projectId");
  return (
    <View>
      <Text>CodeSend initial app</Text>
    </View>
  );
};

export default App;

useCodeSend has second optional parameters to manage update behaviour. Here is the

Parameter	Default	Description
showDownloadConfirmation	true	show confirmation dialog to download update if update found
showDownloadProgress	true	show download update progress in notification
showErrorMessage	true	show error message if checking or download update failed

1. Release your react native application and upload it to marketplace. To make a signed apk, follow tutorial from react native website

2. Release New Update

1. Update your project source code on javascript side, and make a new bundle using following command

$ npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle

2. Create a new update on code send platform and upload your bundle

3. All running application should be notified that there is new update from you