Over-the-air updates (EAS Update) in React Native - Deep Dive

Overview - Over-the-air updates (EAS Update)

What is it?

Over-the-air updates (EAS Update) let you send new versions of your React Native app's JavaScript and assets directly to users without needing them to download a full app update from the app store. This means you can fix bugs, add features, or change content instantly. It works by delivering updates through the internet while the app is already installed on the user's device.

Why it matters

Without over-the-air updates, every change requires users to download a new app version from the store, which can be slow and frustrating. EAS Update solves this by making app improvements fast and seamless, improving user experience and developer productivity. It helps apps stay fresh and bug-free without waiting for app store approvals.

Where it fits

Before learning EAS Update, you should understand React Native basics and how app deployment works. After mastering EAS Update, you can explore advanced app delivery techniques like native code updates, continuous integration, and automated testing pipelines.

Mental Model

Core Idea

EAS Update delivers app code changes directly to users’ devices over the internet, bypassing app store releases for faster updates.

Think of it like...

Imagine your app is a book you gave to a friend. Instead of printing a whole new book for every correction, you send them small sticky notes with fixes and new pages that they can add instantly.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ Developer     │──────▶│ EAS Update    │──────▶│ User's Device │
│ publishes JS  │       │ Server stores │       │ receives new  │
│ & assets     │       │ updates       │       │ code & assets │
└───────────────┘       └───────────────┘       └───────────────┘

Build-Up - 7 Steps

1

Foundation

What Are Over-the-Air Updates

Concept: Introduce the basic idea of updating app code without app store releases.

Normally, mobile apps update through app stores, which can take days for approval. Over-the-air updates let developers send new JavaScript code and assets directly to the app on users' devices instantly, skipping the store.

Result

Learners understand that OTA updates speed up app improvements by avoiding app store delays.

Understanding OTA updates changes how you think about app delivery speed and user experience.

2

Foundation

How React Native Apps Use JavaScript Bundles

Concept: Explain that React Native apps run JavaScript code bundled inside the app or downloaded at runtime.

React Native apps have JavaScript code bundled during build time. This bundle controls app behavior. OTA updates replace this bundle on the device without reinstalling the app.

Result

Learners see that the JavaScript bundle is the key piece that OTA updates change.

Knowing the app runs JavaScript lets you grasp why updating just code is possible without full app reinstall.

3

Intermediate

EAS Update Workflow Basics

Concept: Introduce the steps of creating, publishing, and applying an EAS Update.

Developers make code changes, then run a command to publish an update to EAS servers. When users open the app, it checks for updates and downloads the new bundle if available, applying changes immediately or on next app start.

Result

Learners understand the full cycle from code change to user receiving update.

Seeing the workflow clarifies how updates flow from developer to user seamlessly.

4

Intermediate

Managing Update Channels and Rollouts

🤔Before reading on: Do you think all users get every update immediately or can updates be controlled? Commit to your answer.

Concept: Explain how update channels let you control who gets which update and when.

EAS Update supports channels like 'production' or 'staging' to target different user groups. You can roll out updates gradually or test them before full release, reducing risk.

Result

Learners see how to safely manage updates and avoid breaking all users at once.

Knowing update channels helps prevent costly mistakes by controlling update exposure.

5

Intermediate

Handling Assets and Native Code Changes

🤔Before reading on: Can EAS Update change native app code or only JavaScript? Commit to your answer.

Concept: Clarify what parts of the app EAS Update can and cannot change.

EAS Update can update JavaScript and assets like images instantly. However, changes to native code (like adding new native modules) require a full app store update.

Result

Learners understand the limits of OTA updates and when app store updates are still needed.

Knowing these limits prevents confusion and helps plan update strategies.

6

Advanced

Integrating EAS Update with CI/CD Pipelines

🤔Before reading on: Do you think OTA updates can be automated in development workflows? Commit to your answer.

Concept: Show how to automate publishing updates using continuous integration and delivery tools.

You can configure CI/CD pipelines to run tests, build your app, and publish EAS Updates automatically on code changes. This speeds up delivery and reduces manual errors.

Result

Learners see how professional teams use automation to keep apps updated efficiently.

Understanding automation unlocks scalable and reliable update delivery.

7

Expert

Caching, Rollbacks, and Update Failures

🤔Before reading on: What happens if an OTA update breaks the app? Will users be stuck or can it recover? Commit to your answer.

Concept: Explain how EAS Update handles caching bundles, detecting failures, and rolling back to safe versions.

EAS Update caches downloaded bundles and verifies them before use. If an update causes crashes, the app can revert to the previous working bundle automatically, protecting users.

Result

Learners understand the safety mechanisms that make OTA updates reliable in production.

Knowing rollback strategies prevents fear of breaking apps with OTA updates.

Under the Hood

EAS Update works by hosting JavaScript bundles and assets on a cloud server. When the app launches, it queries the server for the latest update matching its channel. If a newer bundle exists, the app downloads it and stores it locally. The app then loads this new bundle instead of the old one. This process uses caching and integrity checks to ensure updates are valid and safe before applying them.

Why designed this way?

This design balances speed and safety. Delivering only JavaScript and assets avoids app store delays and large downloads. Using channels and caching allows controlled rollouts and quick recovery from bad updates. Alternatives like full app updates are slower and less flexible, while pushing native code OTA is restricted by platform policies.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ Developer     │──────▶│ EAS Update    │──────▶│ User's Device │
│ publishes JS  │       │ Server stores │       │ checks for    │
│ bundle/assets │       │ updates       │       │ updates       │
└───────────────┘       └───────────────┘       │ downloads if  │
                                                │ newer update  │
                                                │ caches update │
                                                └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think EAS Update can change native app code like adding new buttons or sensors? Commit yes or no.

Common Belief: EAS Update can update everything in the app, including native code and UI components.

Reality: EAS Update only updates JavaScript and assets; native code changes require app store releases.

Why it matters: Believing otherwise leads to failed updates and confusion when native changes don't appear.

Quick: Do you think users must manually accept OTA updates before they apply? Commit yes or no.

Common Belief: Users have to approve or download OTA updates manually like app store updates.

Reality: EAS Update downloads and applies updates automatically, often without user interaction.

Why it matters: Misunderstanding this can cause developers to design poor user experiences or miss update delivery.

Quick: Do you think OTA updates instantly fix all bugs without any risk? Commit yes or no.

Common Belief: OTA updates are risk-free and always improve the app immediately.

Reality: OTA updates can introduce bugs; proper testing and rollback mechanisms are essential.

Why it matters: Ignoring risks can cause app crashes and user frustration.

Quick: Do you think all users get OTA updates at the same time? Commit yes or no.

Common Belief: Once published, OTA updates reach every user instantly and simultaneously.

Reality: Updates are delivered based on channels and rollout strategies; not all users get updates at once.

Why it matters: Assuming instant delivery can cause confusion in testing and support.

Expert Zone

1

EAS Update uses a manifest file to track update metadata, enabling precise control over which bundle version each app instance uses.

2

The update download happens asynchronously and can be configured to apply on next app start or immediately, balancing user experience and update speed.

3

Rollbacks are triggered by native crash detection, which requires integration with native error reporting to work reliably.

When NOT to use

Avoid using EAS Update for changes that require native code modifications or new native dependencies; instead, submit a full app store update. Also, do not rely on OTA updates for critical security patches that require native fixes.

Production Patterns

In production, teams use multiple channels (staging, production) to test updates before wide release. They automate update publishing in CI/CD pipelines and monitor crash reports to trigger rollbacks quickly. Gradual rollouts reduce risk by exposing updates to small user groups first.

Connections

Content Delivery Networks (CDNs)

EAS Update uses CDN-like servers to deliver app bundles quickly worldwide.

Understanding CDNs helps grasp how EAS Update achieves fast, reliable delivery of updates to users everywhere.

Continuous Integration / Continuous Deployment (CI/CD)

EAS Update integrates with CI/CD pipelines to automate app update publishing.

Knowing CI/CD concepts clarifies how OTA updates fit into modern automated development workflows.

Caching and Version Control in Web Browsers

EAS Update’s caching and versioning of bundles is similar to how browsers cache and update web resources.

Recognizing this connection helps understand update safety and rollback mechanisms.

Common Pitfalls

#1 Publishing an update with native code changes using EAS Update only.

Wrong approach:

eas update --branch production
// Changed native code but did not submit app store update

Correct approach:

Build a new native app version and submit to app store for native changes.
e.g., eas build --platform ios
Submit new binary to app store

Root cause:

Misunderstanding that EAS Update cannot change native code, only JavaScript and assets.

#2 Not testing updates before wide release, causing app crashes.

Wrong approach:

eas update --branch production
// No staging or testing channel used

Correct approach:

Publish first to a staging channel, test thoroughly, then promote to production.

Root cause:

Ignoring update channels and rollout strategies increases risk of breaking users’ apps.

#3 Assuming users must manually accept OTA updates.

Wrong approach:

Prompting users to download updates manually every time.

Correct approach:

Configure updates to download and apply automatically in background.

Root cause:

Misunderstanding how EAS Update handles update delivery and user experience.

Key Takeaways

EAS Update lets React Native apps update JavaScript and assets instantly without app store delays.

It cannot update native code; those changes require full app store releases.

Update channels and rollout controls help safely manage who gets updates and when.

Automatic caching and rollback protect users from broken updates.

Integrating EAS Update with CI/CD pipelines enables fast, reliable, and automated app delivery.

Practice

1.

What is the main benefit of using Over-the-air (OTA) updates with EAS Update in a React Native app?

easy

A. Fix bugs and add features without waiting for app store approval

B. Increase app size by adding more assets

C. Require users to reinstall the app for every update

D. Disable app functionality temporarily during updates

Solution

1. Step 1: Understand OTA update purpose

   OTA updates let developers fix bugs and add features quickly without app store delays.

2. Step 2: Compare options

   Only Fix bugs and add features without waiting for app store approval describes this benefit correctly; others describe drawbacks or unrelated effects.

3. Final Answer:

   Fix bugs and add features without waiting for app store approval -> Option A

4. Quick Check:

   OTA updates = fast fixes and features [OK]

Hint: OTA updates = fast fixes without app store wait [OK]

Common Mistakes:

• Thinking OTA updates increase app size
• Believing users must reinstall app for OTA
• Assuming app disables during update

2.

Which of the following is the correct way to import the Expo Updates API in a React Native app?

?

easy

A. import { Updates } from 'expo';

B. import Updates from 'react-native-updates';

C. const Updates = require('expo-updates');

D. import * as Updates from 'expo-updates';

Solution

1. Step 1: Recall Expo Updates import syntax

   The official Expo Updates API is imported using "import * as Updates from 'expo-updates';".

2. Step 2: Check other options

   Options A, B, and C use incorrect package names or import styles not recommended for Expo Updates.

3. Final Answer:

   import * as Updates from 'expo-updates'; -> Option D

4. Quick Check:

   Correct import = import * as Updates from 'expo-updates'; [OK]

Hint: Expo Updates import uses * as Updates from 'expo-updates' [OK]

Common Mistakes:

• Using wrong package name like 'react-native-updates'
• Using require instead of import
• Importing Updates from 'expo' instead of 'expo-updates'

3.

Given this React Native code snippet using Expo Updates API, what will be logged if an update is available?

import * as Updates from 'expo-updates';

async function checkUpdate() {
  const update = await Updates.checkForUpdateAsync();
  if (update.isAvailable) {
    console.log('Update found!');
  } else {
    console.log('No update available.');
  }
}

checkUpdate();

medium

A. SyntaxError

B. No update available.

C. Update found!

D. Nothing is logged

Solution

1. Step 1: Analyze checkForUpdateAsync result

   The function returns an object with isAvailable true if an update exists.

2. Step 2: Follow the if condition

   If update.isAvailable is true, it logs 'Update found!'. Otherwise, logs 'No update available.'

3. Final Answer:

   Update found! -> Option C

4. Quick Check:

   Update available logs 'Update found!' [OK]

Hint: If update.isAvailable true, logs 'Update found!' [OK]

Common Mistakes:

• Confusing checkForUpdateAsync return value
• Expecting syntax error from async function
• Thinking nothing logs without await

4.

Identify the error in this code snippet that tries to fetch and reload an update using Expo Updates API:

import * as Updates from 'expo-updates';

async function updateApp() {
  const update = Updates.checkForUpdateAsync();
  if (update.isAvailable) {
    await Updates.fetchUpdateAsync();
    Updates.reloadAsync();
  }
}

medium

A. reloadAsync() must be called before fetchUpdateAsync()

B. Missing await before Updates.checkForUpdateAsync()

C. fetchUpdateAsync() should not be awaited

D. No error, code is correct

Solution

1. Step 1: Check async function usage

   Updates.checkForUpdateAsync() returns a Promise and must be awaited to get the result.

2. Step 2: Identify missing await impact

   Without await, update is a Promise, so update.isAvailable is undefined causing error.

3. Final Answer:

   Missing await before Updates.checkForUpdateAsync() -> Option B

4. Quick Check:

   Always await async calls to get results [OK]

Hint: Always await async calls like checkForUpdateAsync() [OK]

Common Mistakes:

• Forgetting await on async functions
• Calling reloadAsync() before fetching update
• Assuming fetchUpdateAsync() is synchronous

5.

You want your React Native app to check for OTA updates on app start, download them silently, and apply on next app reload. Which approach correctly implements this behavior?

?

hard

A. Use Updates.checkForUpdateAsync(), then if available, call Updates.fetchUpdateAsync() without reload, apply on next start

B. Call Updates.reloadAsync() immediately on app start to force update

C. Only call Updates.fetchUpdateAsync() without checking availability

D. Use Updates.checkForUpdateAsync() and reloadAsync() immediately without fetching

Solution

1. Step 1: Understand OTA update flow

   Check for update availability first, then fetch update silently if available.

2. Step 2: Apply update on next reload

   Fetching update downloads it; reloadAsync applies update immediately, but we want to apply on next app start.

3. Final Answer:

   Use Updates.checkForUpdateAsync(), then if available, call Updates.fetchUpdateAsync() without reload, apply on next start -> Option A

4. Quick Check:

   Check, fetch silently, reload later = Use Updates.checkForUpdateAsync(), then if available, call Updates.fetchUpdateAsync() without reload, apply on next start [OK]

Hint: Check availability, fetch silently, reload later for smooth update [OK]

Common Mistakes:

• Reloading app immediately causing bad UX
• Fetching update without checking availability
• Reloading without fetching update