Server side updates in React Native

How to deliver instant updates to a React Native application without the need to make a new release and pass through the approval process of the stores.

Some introduction first

The development of a mobile app is pretty tedious and usually it requires to code the app, upload it to stores, wait for some time to be approved and then release it to your users (I prefer to do it manually so both android a iOS users get the same set of features simultaneous)

Most of the time this is “enough” but sometimes it would be great to be able to deliver improvements to the users instantly

The most obvious case is when you have a nasty bug and you need to wait for days for the review teams in stores. But this can also be used for A/B testing, ideas/MPV validations, customization, etc.

Currently there are a few ways of doing presented below in a (very) simplified way:

OTA (Over-The-Air) Updates

Because of the way React Native works (a native side and a JS side that drives the logic) you basically can push to the app a new JS bundle and new assets anytime you want. The app will start in an “loading” mode, check if the server has a new bundle and/or assets, download it and then start for real.

Microsoft App Center Codepush and Expo EAS Update are 2 examples of tools you could use for this functionality.

SDUI (Server Driven UI System)

This is an approach taken by many companies and how it works is that the server would send to the app a configuration file (a json for example) which would instruct the app how to build the UI and what actions to take. The app would already have embedded all the cases (UI elements, action to be taken, etc) present in the remote file and would render the screens based on this. A good read (even is not React Native) on how AirBnb does it is this article by @rbro112

I don’t know any library/service to do this for React Native so if you know any please let me know but I’ve found Hyperview which seems to use xml files for this purpose.

Server hosted components — Wormhole

Actually this is the part where I wanted to get 🤪.

React-native-wormwhole is tiny module(pure JS) which allows you to host your components on the server and let the app consume it as they were bundled with the app. It also have some utilities, like preloading and verifying the downloads.

Working with it is pretty simple, you’d develop the components just like any other part of your app, and when the time comes you only need to prepare them ( scroll down a little, is just a babel command 😅) for hosting before uploading to the server.

You can see a quick demo in Alex Thomas’s (the author of this module) tweet

A word of caution

Both Apple and Google are extremely cautious with what your app is doing so use this techniques only to enrich the user’s experience and stick 100% to the purpose of your app. Doing otherwise will probably get you banned.

Another aspect to be aware is that you can only update the JS part of your app, a new native module would still need you to upload a new version in the stores.

Pros and Cons

OTA Updates

• you need to subscribe to one of the mentioned platforms (con)
• my understanding is that the JS bundle is uploaded entirely, so it can be a “big” file to download (con)
• you get all the tooling you need for the update, there is little to manage on your own side (pro)
• EAS update works only with Expo apps. (con ?)

SDUI

• the app has to have everything already built in (UI elements, etc) (con) but for well structured/developed apps this approach is great for fast iterations (pro)
• the size of the downloaded file is usually very small (pro)
• you need to handle the update and versioning logic yourself (con)

Wormwhole

• there is no difference in developing for the server hosted components vs the app itself, actually you can use the very same file during development (pro)
• the resulting files are super small (pro)
• it is not prepared to download new assets (con)
• you need to handle the update and versioning logic yourself (con)

Let me know your thoughts and if you know other solutions please get in touch :)