Releasing React Native update without submiting new version on playstore / appstore

One of advantage when developing your apps using react native is you can “live-releasing” your apps without needing for submiting new build version to the appstore/ playstore.

Amazing Right?

And my favourite reason is because is it “Free”.

So, the question is, How’s to?

The answer is use “Code Push”. Then What is “Code push”?.

CodePush is a cloud service that enables Cordova and React Native developers to deploy mobile app updates directly to their users’ devices. It works by acting as a central repository that developers can publish updates to (JS, HTML, CSS and images), and that apps can query for updates from (using provided client SDK for Cordova and React Native). This allows you to have a more deterministic and direct engagement model with your userbase, when addressing bugs and/or adding small features that don’t require you to re-build a binary and re-distribute it through the respective app stores.

Ok, enought with the theory, let’s start the implementation. This setup is working with react native > 0.60 version. you can check here for different version setup.

1. Install code push cli:

using npm :

npm install -g code-push-cli

2. Register or login for app center :

since codepush is part of appcenter you need have appcenter account to use it. run this :

code-push register

this command will open your browser and open appcenter login page.

Appcenter login page

When your login success then copy paste your token got from browser in your code-push cli.

The codepush-token you got after success login

3. Integrating react-native-codepush on your React Native project.

go to your react native project root folder, if you dont have you can make one by running this :

react-native init <YOUR_APP_NAME>

Install react-native-code-push :

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

4. Integrating for specific platform.

Android Setup

• Create your android app on appcenter :

code-push app add <YOUR_APP_NAME_FOR_ANDROID> android react-native

the explanation of code above is : code-push app add <appName> <os> <platform>.

then you will got two code push deployment key for staging and production when success. keep those token in private places.

you can also check your appcenter dashboard to see your new apps.

• Edit your gradle files :

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-code-push/android/codepush.gradle”

• Open MainApplication.java, then add this two line of code :

//1. Import Library
import com.microsoft.codepush.react.CodePush
....
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

   //2.override getJsBundleFileMethod, this method will looking your bundle file via codepush when running application
   @Override
   protected String getJSBundleFile() {
      return CodePush.getJSBundleFile();
   }
}

open your strings.xml on android/app/src/main/res/values, add your deployment key with name CodePushDeploymentKey :

<string name="CodePushDeploymentKey">INSERT_YOUR_KEY_HERE</string>

iOS Setup

• Create your iOS app on appcenter :

code-push app add <YOUR_APP_NAME_FOR_IOS> ios react-native

you will got two key for your ios codepush apps.

• Run Pod install :

cd ios && Pod install

• open and makes changes Appdelegate.m :

//add this line 
#import <CodePush/CodePush.h>
//find this line
return [[NSBundle mainBundle] URLForResource:@”main” withExtension:@”jsbundle”];
//then replace with this
return [CodePush bundleURL];

• Add codepush deployment key on info.plist

open info.plist as source code then add your deployment key with “CodePushDeploymentKey” as value

<key>CodePushDeploymentKey</key>
<string>INSERT_YOUR_DEPLOYMENTKEY_HERE</string>

5. Final Setup.

Back to your React native project,

• open App.js then add this code :

let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, installMode: codePush.InstallMode.ON_NEXT_RESUME };
App = codePush(codePushOptions)(App);

those code is for set options to your apps to check for update, this will check when app re-enter to foreground and for installing Indicates that you want to install the update, but don’t want to restart the app until the next time the end user resumes it from the background. you can read more here for other options https://github.com/microsoft/react-native-code-push/blob/master/docs/api-js.md#checkfrequency.

dont forget to import codepush on top of App.js classes :

import codePush from ‘react-native-code-push’

6. Releasing your update to production

• Android

code-push release-react <YOUR_APP_NAME_FOR_ANDROID> android

• iOS

code-push release-react <YOUR_APP_NAME_FOR_IOS> ios

if you got error within “CFBundleShortVersionString need to specify”. you can use this command.

code-push release-react <YOUR_APP_NAME_FOR_IOS> ios -t [your target version]

by running those command your apps update has successfully refreshed to the latest version. This is very helpfull for you to fix your major bugs immediately.

That’s All. Hope it helps :)