Over The Air Updates in React-Native

Deploying a new build is always a hassle and time-consuming task. Consider a scenario QA reports a bug and all you need to do to fix the bug is just add a single line. However, you need to go through a complete build process which takes about forty minutes even if you have Fastlane configured.

The problem becomes worst when the application is in production, and a bug is encountered. Then you do not only have to go through the complete build process and upload a new build on Play Store and App Store but also wait for at least a day till the app is reviewed and is live and then the users will have to download the updated version.

To address all the above-mentioned issues and to make deploying part easier, a service called Code Push comes to help. It is a cloud service from Microsoft Visual Studio App Center, that acts as a central repository where developers can publish certain updates.

Setting up Code-Push

To start with Code Push you need to create an account on Visual Studio App Center.

Along with Code Push, Visual Studio App Center brings together multiple common services into a DevOps cloud solution. Developers use App Center to Build, Test, and Distribute applications. Once the app’s deployed, developers monitor the status and usage of the app using the Analytics and Diagnostics services.

Create an app

When you add a new app in App Center, you need to create a new app for each platform, one app for Android, one app for iOS. After you have created an app, in a sidebar, go to Distribute > Code Push, there you will have a list of all Code Push releases you have created along with the release type – Production or Staging.

Setting up Client SDKs

You manage most of CodePush’s functionality using the App Center CLI. To install the CLI, open a terminal window or command prompt and execute the following command:

npm install -g appcenter-cli

Execute the following command for Code-Pushify your current react-native app.

npm install --save react-native-code-push

After installing the NPM package, you need to install the native module, so follow the iOS setup and Android setup.

For React Native versions above 0.60

iOS:

In AppDelegate.m file:

1. #import <CodePush/CodePush.h>
2. Find:
   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
3. Replace it with:
     return [CodePush bundleURL];

This is how sourceURLForBridge method should look like

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}

4- Add Code push deployment key in Info.plist from Distribute > Code Push and go to settings to find the key of the release type.

<key>CodePushDeploymentKey</key>
<string>$(CODEPUSH_KEY)</string>

ANDROID:

1- In android/settings.gradle add the following lines at the end of the file:

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

2- In your android/app/build.gradle file, add the codepush.gradle file as an additional build task definition underneath react.gradle:

...
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...

3- Update MainApplication.java:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

4- Add Deployment Key in strings.xml:

<resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>

Using Code-Push plugin: 

Wrap your root component with the CodePush higher-order component:

import codePush from 'react-native-code-push';
let App = () => {
 . . .
}
 
App = codePush(App);
export default App;

Releasing updates:
Add the following scripts in package.json

"code-push-ios": "appcenter codepush release-react -a <ownerName>/MyApp-iOS -d Staging",
"code-push-android": "appcenter codepush release-react -a <ownerName>/MyApp-Android -d Staging"

Execute npm run code-push-ios and npm run code-push-android to updated react native app over the app.

Once these steps are complete, all users running your app will receive the update. Moreover, release updates will be visible in the CodePush dashboard. You can go to a specific build and turn on the required-update to make sure that the new code is installed as soon as it’s downloaded from the server or else it will be installed and will be visible the next time app is opened.

Conclusion:

Code-Push is a powerful tool that helps in seamless deployments and both, Google Play Store and App Store permit using it. Even though this is an “abstract” way to apply updates across devices, Android does not have a specific guideline for this, but Apple does. You can find more info in the Store guideline compliance.