Integrate CodePush to a React Native Android app

CodePush is a service from Microsoft that helps improve the deployment experience of your React Native apps. React Native code has a native part (written in Objective-C or Java) and a JavaScript part (the code we write). Normally, when deploying an app to the App Store, the JavaScript code is bundled together with the compiled native code.

React Native app in Play Store

If there is a minor JavaScript code change, the app is recompiled and submitted to Play Store or App Store for rollout. For Play Store, app rollout takes an hour or so. For App Store, app rollout takes about a day. CodePush helps to bypass app deployment for JavaScript code changes. We will find out how.

CodePush ReactNative app

Instead of embedding JavaScript bundle into the app, CodePush workflow stores the bundle in Microsoft servers or Appcenter. The user downloads the app in the device. When the app starts, the app downloads the JavaScript bundle from Appcenter. When we want to update the app, we push the update to Appcenter. And the app automatically downloads the update when it restarts the next time. In this way, developers bypass the App Store rollout for minor updates.

Next, we will walk through a tutorial on how to integrate CodePush into an existing Android app.

Getting the deployment key

  1. Sign up for a new Appcenter account.
  2. Create a new app (PreviousNextAndroidApp).
  3. Click on the app, within Distribute section, click on CodePush
CodePush tab in Distribute section of the app

4. Create standard deployments. This will create a staging deployment and a production deployment for your app. For this tutorial, we will ignore the staging deployment and work directly with production deployment.

5. Install appcenter-cli.

yarn global add appcenter-cli

6. Login to appcenter using the command line.

appcenter login

This step provides the access token in a browser window. Copy the access token and paste it into the terminal.

7. Get the appId of the newly created app.

appcenter apps list

This will list vijayst/PreviousNextAndroidApp(the app that you created in Appcenter)

8. Get the deployment key.

appcenter codepush deployment list -a vijayst/PreviousNextAndroidApp

The deployment key is important and we will use it in the next section.

Integrate CodePush SDK

9. Add the react-native-code-push package.

yarn add react-native-code-push

10. Link the package.

react-native link

This step will modify the native code. It will also ask you to provide the deployment key. Provide the Production deployment key.

11. Wrap the root component with codePush HOC.

import codePush from 'react-native-code-push';
AppRegistry.registerComponent('PreviousNextApp', () => codePush(App));

12. CodePush the app bundle.

appcenter codepush release-react 
-a vijayst/PreviousNextAndroidApp 
-d Production

This will create a new release in Appcenter. It gets download automatically when we release the CodePush version of our Android app to the Play Store.

Publish new version

13. Increment versionCode and version number in two places: build.gradle and AndroidManifest.

14. Build the app.

cd android && ./gradlew assembleRelease

Publish the APK to the Play Store and rollout a new version of your app.

15. Make a minor update to the app. Publish the update only to Appcenter. Test if your app picks the new update in the next restart.

The PreviousNext app which has the CodePush SDK is available in Play Store.

Related Posts

One thought on “Integrate CodePush to a React Native Android app

  1. How do we add codePush to an react native integerated Android app, where react native part is just a module inside native android app

Leave a Reply

Your email address will not be published.