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

Introduction

Over-the-air updates let you fix bugs and add features to your app without asking users to download a new version from the app store.

You want to quickly fix a small bug in your app without waiting for app store approval.

You want to add new features or content to your app instantly for all users.

You want to improve user experience by delivering updates seamlessly in the background.

You want to avoid users losing data by forcing them to update the app manually.

You want to test changes with a small group before releasing to everyone.

Syntax

React Native

import * as Updates from 'expo-updates';

async function checkForUpdate() {
  try {
    const update = await Updates.checkForUpdateAsync();
    if (update.isAvailable) {
      await Updates.fetchUpdateAsync();
      await Updates.reloadAsync();
    }
  } catch (e) {
    console.error(e);
  }
}

Use checkForUpdateAsync() to see if a new update is available.

If an update is available, fetchUpdateAsync() downloads it, and reloadAsync() restarts the app with the new code.

Examples

This example checks for updates when the app starts and applies them immediately.

React Native

import * as Updates from 'expo-updates';
import { useEffect } from 'react';

// Check and apply update on app start
useEffect(() => {
  async function updateApp() {
    const update = await Updates.checkForUpdateAsync();
    if (update.isAvailable) {
      await Updates.fetchUpdateAsync();
      await Updates.reloadAsync();
    }
  }
  updateApp();
}, []);

This example lets users manually check for updates by pressing a button.

React Native

import * as Updates from 'expo-updates';
import { Alert } from 'react-native';

// Manually trigger update check on button press
async function onUpdatePress() {
  const update = await Updates.checkForUpdateAsync();
  if (update.isAvailable) {
    await Updates.fetchUpdateAsync();
    Alert.alert('Update downloaded! Restarting app...');
    await Updates.reloadAsync();
  } else {
    Alert.alert('App is up to date!');
  }
}

Sample App

This app checks for updates when it starts. If an update is available, it shows a message and a button. Pressing the button downloads and applies the update, then restarts the app.

React Native

import React, { useEffect, useState } from 'react';
import { View, Text, Button, Alert } from 'react-native';
import * as Updates from 'expo-updates';

export default function App() {
  const [updateAvailable, setUpdateAvailable] = useState(false);

  useEffect(() => {
    async function checkUpdate() {
      try {
        const update = await Updates.checkForUpdateAsync();
        setUpdateAvailable(update.isAvailable);
      } catch (e) {
        console.error(e);
      }
    }
    checkUpdate();
  }, []);

  async function applyUpdate() {
    try {
      await Updates.fetchUpdateAsync();
      Alert.alert('Update downloaded', 'The app will now restart to apply the update.');
      await Updates.reloadAsync();
    } catch (e) {
      Alert.alert('Update failed', 'Could not apply update.');
    }
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 18, marginBottom: 20 }}>
        {updateAvailable ? 'Update available!' : 'App is up to date.'}
      </Text>
      {updateAvailable && <Button title="Update Now" onPress={applyUpdate} />}
    </View>
  );
}

Important Notes

OTA updates only work for JavaScript and assets, not native code changes.

Users must have internet connection to download updates.

Test updates carefully to avoid breaking the app for users.

Summary

Over-the-air updates let you fix and improve your app without app store delays.

Use Expo Updates API to check, download, and apply updates in your React Native app.

Always handle errors and inform users about update status for good experience.

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