Hello everyone.
In this article we are going to explore how to establish React Native Over The Air Updates using Expo.

As a part of any app’s development and continuous integration lifecycle.
You will usually find yourself pushing new updates, and upgrading your dependencies every few weeks.

The old school way of doing so is to just build your app and upload your new builds to both Playstore and App store.
And, most of the time both Appstore and Playstore will restart the review and publish from scratch.
Af if the app was newly submitted.
Last time I submitted an app it took around 7 days.
So You can just imaging how much tame it will take every time you upload a new build.
And if your app have a serious bug, it wont be updated for sometime.

But that not the case, as there are new projects being developed to help the entire React Native Over The Air Updates.
One of them is CodePush developed by Microsoft.

If you are using Expo.io, I have good news for you, it already supports Over The Air Updates.

How Does Expo Over The Air Updates Work?

Expo Over The Air Updates or OTA for short.
Allows you to send new versions of javascript and assets to your app, Without the need to build and re-submit a new standalone app every time you have new updates.

Everytime your app Launches, Expo by default tries to check for new published versions of your app.
whenever a new version of your app is published, it will try to fetch it before Launching the app.
if not, Expo will use the caches version.

To prepare your project to receive future over the air updates you have to edit your App.json configuration file.

Using the updates property. Which itself has just 3 properties.

Enabled

Can Either be True or False,
If it’s set to true, your app will download any newly published javascript code and assets.
If it’s set to false, the app will never download any code, and rely on you to publish a new version of your app through the stores.

CheckAutomatically

Can Either be “ON_LOAD” or “ON_ERROR_RECOVERY”

By default, If Over The Air Updates are enabled, your app will check for updates every time it launches.
To disable the automatic checking set it to check on recovery from error.

fallbackToCacheTimeout

How much time in milliseconds the app is allowed to fetch over the the updates.
By default, its 3000 (3 seconds), but can be up up 5 minutes.

App.json updates example



{
    "updates": {
        "enabled": true,
        "checkAutomatically":"ON_LOAD",
        "fallbackToCacheTimeout":10000

    }
}

Manual Updates

Another option you can up for if you want updates and control how often they happen, maybe through a server call.
You can turn off the automatic updates and write your own code to handle the entire process

You can do so by setting “checkAutomatically” into “ON_ERROR_RECOVERY”.

This way the app will always fallback to the cached version, then you can use Updates to handle the updates logic.

This is an example of the code you can write

try {
  const update = await Updates.checkForUpdateAsync();
  if (update.isAvailable) {
    await Updates.fetchUpdateAsync();
    // ... notify user of update ...
    Updates.reloadFromCache();
  }
} catch (e) {
  // handle or log error
}

After that, every time you need to send updates to your app, you just hit.

expo publish

That was it for this article on how to establish React Native Over The Air Updates using Expo.
I hope as informative as you have expected.
Take care and Happy Coding.