React Native Over The Air Updates

React Native Over The Air Updates

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.

Total
5
Shares
7 comments
  1. I love OTAs and Expo. I wonder how this magic works under the hood, since react-native claims they are doing “native”? So, Where is the magic that converts the new elements shipped in the javascript package over the air into compiled native elements? Is there any docs explaining that?.. or maybe you can explain that magic?

    1. Hi mate,
      Honestly it’s a new concept and still not well documented yet. Recently I have been new apps using OTAs, such as Facebook app as an example. They have a 1.5 mb version in playstore and once you open it first time you get an update popup, and it starts updating inside the app, without downloading again from play store or anything.

      1. Thanks for your explanation. Though I still don’t get the concept. E.g, I add a new Element to the code and ship it via OTA. Why does that work, since somehow these elements will be in Javascript bundle only, but where does the compilation happen into the real and platform specific native elements? … without creating the binaries (.apk, and .ipa)?

  2. Thanks,

    Would you happen to know how OTA impacts an update published to the App Store or Google Play Store. I am trying to have the App updated by the App Store but when I try to update from the app store and reload I get the old version I had. Does OTA interfere with the update process by re downloading the “latest” version from your release channel?

    1. Hi Donald, Thanks for passing by.
      I think The OTA has nothing to do with the Play/App store.
      If you use OTA, The app versions in a store won’t change, but the functionality you add will.
      Similar to how facebook apps update, it downloads the new update from within the app, instead of publishing a new version on the store.

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
React Native Video Player Tutorial Featured

React Native Video Player Tutorial

Next Post
React Native Notification Bar

React Native Notification Bar Example

Related Posts