CodePush Integration in React Native App

Codepush- the best option available for time consuming and frustrating frequent updates to any Mobile App.
In this blog, I will try to explain the CodePush integration in React Native with simple way as possible. ;)

To begin with what is CodePush-
-It is an App Center cloud service from Microsoft which allows Cordova and React Native apps to be updated directly to the end user devices without releasing builds for every update.
-The point to be noted is that only Javascript code (e.g minor feature changes, bug fixes) or assets can be distributed through CodePush any changes that are in native code cannot be distributed.

Steps to Integrate CodePush in React Native:

Create your app in the App Center Portal to obtain the App Secret at https://appcenter.ms/

• Sign up or log in if you already have an account.
• Add new app from the screen below

• Enter a name and an optional description for your app.
• Select the appropriate OS (Android or iOS) and select React Native as the platform.
• Once you have created an app, you can obtain its App Secret on the Getting Started page or Settings page on the App Center Portal.

Integrate CodePush in React native.

• We will use the React Native wrapper react-native-code-push for code push provided by Microsoft.
• Install react-native-code-push
  npm install --save react-native-code-push
• iOS Setup
  • Using RNPM
    react-native link react-native-code-push
  • Using CocoaPods
    pod 'CodePush', :path => '../node_modules/react-native-code-push'
  • Manual
    Adding lib package using Xcode
• Android Setup
  • Using RNPM
    react-native link react-native-code-push
  • Manual
    Using gradle

Note: For detailed setup information, please go to https://github.com/Microsoft/react-native-code-push

Setup CodePush CLI

• Install code-push-cli
  npm install -g code-push-cli
• Create CodePush account using CLI
  code-push register
• Register app with CodePush
  code-push app add MyApp android react-native

Using CodePush CLI

• If not logged in, you can login by
  appcenter login
• See the available apps in your logged in account
  appcenter apps list
• Set current app form the list
  appcenter apps set-current owner-name/app-name
• See the deployment keys for all environments
  appcenter codepush deployment list
• Add deployment keys to app-name/android/app/src/main/res/values/strings.xml in Android.

<resources>
    <string moduleConfig="true" name="reactNativeCodePush_androidDeploymentKey_staging">staging_deployment_key</string>
    <string moduleConfig="true" name="reactNativeCodePush_androidDeploymentKey_production">production_deployment_ket</string>
</resources>

• Add deployment keys to app-name/ios/AppName/Info.plist in iOS.

<key>CodePushDeploymentKey</key>
<string>deployment_key</string>

• Example for codepush to staging
  appcenter codepush release-react -a owner-name/app-name -d Staging

Example code in App.js to check for CodePush update and show update dialog in app

import codePush from 'react-native-code-push'

codePush.sync({
        updateDialog: true,
        installMode: codePush.InstallMode.IMMEDIATE
      }, this.onSyncStatusChange)

So finally, you have basic and simple way to start using CodePush with your react native app.