{"id":14761,"date":"2024-10-28T14:43:39","date_gmt":"2024-10-28T13:43:39","guid":{"rendered":"https:\/\/pagepro.co\/blog\/?p=14761"},"modified":"2026-01-28T11:26:01","modified_gmt":"2026-01-28T10:26:01","slug":"ota-updates-with-expo","status":"publish","type":"post","link":"https:\/\/pagepro.co\/blog\/ota-updates-with-expo\/","title":{"rendered":"OTA Updates With Expo"},"content":{"rendered":"\n

What is an OTA update?<\/h2>\n\n\n\n

Over-the-air (OTA) are\u2026 updates that are sent over the air. Yeah, I know that does not explain anything but bear with me. Expo OTA updates are a fantastic method to swiftly fix your application without the usual delays<\/strong>. It enables you to bypass the App Store or Google Play store entirely when releasing an update.<\/p>\n\n\n\n

Imagine that your mobile app has a critical bug in production and releasing a fix can take days to reach your customers. Even if it’s a quick fix, each update released to the App Store or Google Play has to go through a store review process before it\u2019s approved<\/strong>. <\/p>\n\n\n\n

This process can be a bit of a pain, especially because it can be time-consuming and sometimes costly, and let’s face it, every hour counts because you don’t want to miss out on potential users just because your app isn’t working as it should. This is where Expo’s over-the-air update function comes in handy for all mobile app developers.<\/p>\n\n\n\n

Expo<\/a> OTA updates let you send critical bug fixes immediately without even worrying about verification times<\/strong>, which helps to improve user experience!<\/p>\n\n\n\n

It is a feature exclusive to<\/strong> React Native mobile applications<\/a><\/strong> because of its unique functionality. They comprise two key components: native code and the JS bundle. The JS bundle, which contains about 90% of the application logic<\/strong>, can be completely replaced using OTA updates.<\/p>\n\n\n\n

Interested? Let’s implement OTA in your Expo app<\/strong>!<\/p>\n\n\n\n

Creating a New Expo Application<\/h2>\n\n\n\n

First, let’s start with creating a new Expo application.<\/strong> To do this, simply run this command in the terminal where \u201cmy-app\u201d will be the name of your application.<\/p>\n\n\n\n

npx create-expo-app my-app<\/code><\/pre>\n\n\n\n
This will create a new project for us and install all necessary dependencies to run the application. To test if it works it can be opened by running.<\/p>\n\n\n\n
# go to the project directory\ncd my-app\n\n# for android\nnpm run android\n\n# for ios\nnpm run ios<\/code><\/pre>\n\n\n\n
You should be seeing an app like this:<\/p>\n\n\n
\n
\"OTA<\/figure><\/div>\n\n\n
<\/p>\n\n\n\n
The next step is to create a new application on https:\/\/expo.dev<\/a><\/p>\n\n\n\n
\"OTA<\/figure>\n\n\n\n
And then link it to our local application by running the command shown on the screen:<\/p>\n\n\n\n
\nnpm install --global eas-cli && \\\neas init --id <id_of_your_project>\n<\/code><\/pre>\n\n\n\n
With this, we are ready to add OTA updates to our app!<\/p>\n\n\n\n
Not sure where to start with your mobile app?<\/p>
Have a chat with us<\/a><\/div><\/div><\/div>\n\n\n\n
Adding OTA Feature to the Expo App<\/h2>\n\n\n\n
First, we need to install the expo-updates library and then configure both EAS build and updates to work properly. This can be done with the following commands (please run the commands in the provided order).<\/p>\n\n\n\n
npx expo install expo-updates\neas build:configure\neas update:configure<\/code><\/pre>\n\n\n\n
After running these commands you should see some changes made to your project. The file that interests us the most is the eas.json file, it should look something like this:<\/p>\n\n\n\n
{\n \"cli\": {\n   \"version\": \">= 11.0.2\"\n },\n \"build\": {\n   \"development\": {\n     \"developmentClient\": true,\n     \"distribution\": \"internal\",\n     \"channel\": \"development\"\n   },\n   \"preview\": {\n     \"distribution\": \"internal\",\n     \"channel\": \"preview\"\n   },\n   \"production\": {\n     \"channel\": \"production\"\n   }\n },\n \"submit\": {\n   \"production\": {}\n }\n}\n<\/code><\/pre>\n\n\n\n
This file contains the profiles for each of our build profiles. Running the \u201ceas update:configure<\/code>\u201d command has added a \u201cchannel\u201d key for our profiles. This key allows us to which profile receives specific updates for our app. Don’t worry, we’ll dig into the details of channels shortly. First, let\u2019s check if our updates work!<\/p>\n\n\n\n
Pushing the First Update<\/h2>\n\n\n\n
Before we can check if our updates work we have to build a standalone version of our app as development or Expo Go builds are designed to always load the latest available bundle.
<\/p>\n\n\n\n
We will create a build with the \u201cpreview\u201d profile which by default is intended for internal distribution to showcase the application. To do this run the following command:<\/p>\n\n\n\n
eas build --profile preview --platform android<\/code><\/pre>\n\n\n\n
After the build is completed you can download it on https:\/\/expo.dev<\/a> under the \u201cbuilds\u201d page. You can either install it on your real device by using the QR code shown after pressing the \u201cInstall\u201d button or download an apk file by pressing the options -> download build and drag it onto your simulator.<\/p>\n\n\n\n
\"Expo<\/figure>\n\n\n\n
As you launch the application you will notice one major difference right away: the absence of the Expo Go client. Your app is built in a standalone version which looks and behaves like a production version of your application. But just like before you will see the same screen as we had originally in our app saying \u201cOpen up App.js to start working on your app!\u201d<\/p>\n\n\n\n
\"OTA<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Let’s now make a change and push it to our already-built app! Open the \u201cApp.js\u201d file and change the Welcome text to I\u2019m from an OTA update!<\/code> <\/p>\n\n\n\n
import { Image, StyleSheet, Platform } from 'react-native'\n\n\nimport { HelloWave } from '@\/components\/HelloWave'\nimport ParallaxScrollView from '@\/components\/ParallaxScrollView'\nimport { ThemedText } from '@\/components\/ThemedText'\nimport { ThemedView } from '@\/components\/ThemedView'\n\n\nexport default function HomeScreen() {\n return (\n   <ParallaxScrollView\n     headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}\n     headerImage={\n       <Image\n         source={require('@\/assets\/images\/partial-react-logo.png')}\n         style={styles.reactLogo}\n       \/>\n     }\n   >\n     <ThemedView style={styles.titleContainer}>\n       <ThemedText type=\"title\">I\u2019m from an OTA update!<\/ThemedText>\n       <HelloWave \/>\n     <\/ThemedView>\n    . . .\n<\/code><\/pre>\n\n\n\n
We can easily preview the changes that we have made by running \u201cnpm run android\u201d but these are only visible to us. To push this change to all users who have installed our app in the \u201cpreview\u201d channel we have to run this command:<\/p>\n\n\n\n
eas update --branch preview --message \"Example update\"<\/code><\/pre>\n\n\n\n
This command will create a new js bundle with the changes we have made and send it to expo servers so it is available for our users. The \u201cmessage\u201d argument is a short description of our update. We will discuss the \u201cbranch\u201d argument later together with channels.<\/p>\n\n\n