CodePush Integration in React Native App

React Native Jul 30, 2018

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

Screen-Shot-2018-07-30-at-2.28.01-PM-1

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

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.