DEV Community

Asim Mehmood
Asim Mehmood

Posted on

Over the air (OTA) update using Revopush in react native

In this article, we will learn what is over the air updates and how to configure and use over the air updates feature in react native app.

An OTA (Over-The-Air) update refers to the process of delivering and applying updates to your React Native application directly to users’ devices without requiring them to go through the traditional app store update process (i.e., Google Play Store or Apple App Store).

Instead of bundling all your JavaScript, assets (like images and fonts), and potentially native code into a new app binary that needs to be submitted, reviewed, and then downloaded by users from the app stores, an OTA update allows you to push changes to these elements directly to the installed app

1-Installation
First of all, you have to install you have to install the revopush package using following command

For NPM

npm i @revopush/react-native-code-push
Enter fullscreen mode Exit fullscreen mode

For Yarn

yarn add @revopush/react-native-code-push
Enter fullscreen mode Exit fullscreen mode

Now, configure the package according to the version of react native your app is using.

2 - Follow the instructions from the docs according to the variant

For configuration in IOS
https://github.com/revopush/react-native-code-push/blob/master/docs/setup-ios.md

For configuration in Android
https://github.com/revopush/react-native-code-push/blob/master/docs/setup-android.md

3 - Wrapping the App with Revopush

For Automatic updates checking and installation

let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };

let MyApp: () => {
  render(){
    return {
      <View>
      </View>
    }
  }
}

MyApp = codePush(codePushOptions)(MyApp);
Enter fullscreen mode Exit fullscreen mode

For manual updates checking and installation

let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };

const MyApp = () => {
  const onButtonPress = () => {
    codePush.sync({
      updateDialog: true,
      installMode: codePush.InstallMode.IMMEDIATE
    });
  }
  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.onButtonPress}>
          <Text>Check for updates</Text>
        </TouchableOpacity>
       </View>
      )
   }
}

MyApp = codePush(codePushOptions)(MyApp);
Enter fullscreen mode Exit fullscreen mode

3.1 - CodePush Options

checkFrequency

Controls when the app checks for updates.

codePush.CheckFrequency.MANUAL (you manually trigger check)
codePush.CheckFrequency.ON_APP_START (default)
codePush.CheckFrequency.ON_APP_RESUME

InstallMode

Controls when the update gets applied after download.

codePush.InstallMode.IMMEDIATE: Apply update right away (may reload app).
codePush.InstallMode.ON_NEXT_RESTART: Apply next time app is restarted.
codePush.InstallMode.ON_NEXT_RESUME: Apply when app resumes after going to background.
codePush.InstallMode.ON_NEXT_SUSPEND: Apply after system suspends the app.

Manual Methods

If you set checkFrequency: MANUAL, you can control everything programmatically:

codePush.sync({
  installMode: codePush.InstallMode.IMMEDIATE,
  updateDialog: true,
});
Enter fullscreen mode Exit fullscreen mode

4 - Revopush CLI installation

Now, we have to install Revopush CLI to access and use Revopush using our terminal / CLI.

To install Revopush, use the following command

For NPM

npm install -g @revopush/code-push-cli
Enter fullscreen mode Exit fullscreen mode

For Yarn

yarn add -g @revopush/code-push-cli
Enter fullscreen mode Exit fullscreen mode

Login to Revopush CLI using the following command:

revopush login
Enter fullscreen mode Exit fullscreen mode

You will be prompted to the browser with an access key. Copy the access key from browser and paste the key in the terminal from where you are trying to login.

Now, you are logged in.

Note: From browser,you can also access your revopush dashboard at this URL https://app.revopush.org/

To get a detailed information regarding revopush CLI, you can checkout the documentation

https://docs.revopush.org/cli/getting-started

Create an App on RevoPush

Now, create an app on revopush using your revopush dashboard or revopush CLI

For creating app using CLI, use the following command. Replace the appName with the name you want to create the app.

Command syntax: revopush app add <appName>
Command example: revopush app add MyAppIOS
Enter fullscreen mode Exit fullscreen mode

Now, your app is created on revopush dashboard. You can verify by checking the applications tab in your dashboard.

Releasing updates using revopush

Now, you can release updates using the following commands

Command syntax: revopush release-react <appName> <platform ios/android>

Command example: revopush release-react MyApp android -d Production
Command example: revopush release-react MyApp ios -d Production
Enter fullscreen mode Exit fullscreen mode

Congratulations, Now you have configured the over the air update feature in your react native app.

Top comments (0)