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

[Lomanu4]

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

For Yarn


yarn add @revopush/react-native-code-push

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

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

For configuration in Android

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

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);

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);

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,
});

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

For Yarn


yarn add -g @revopush/code-push-cli

Login to Revopush CLI using the following command:


revopush login

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

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

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

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

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

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

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

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.