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.