Skip to Content
BlogHow to Setup OTA Updates for React Native: The 2026 Guide

How to Setup OTA Updates for React Native: The 2026 Guide

April 14, 2026


Shipping mobile apps is slow. Apple and Google provide fantastic ecosystems, but their review processes aren’t built for the speed of modern web-style development.

OTA (Over-The-Air) updates change that by allowing you to push JavaScript, assets, and styling changes directly to your users’ devices—bypassing the app stores entirely for non-native changes.

In this guide, we’ll walk through exactly how to set up AppSpacer for a fresh React Native project in under 15 minutes.


Prerequisites

Before we begin, ensure you have:

  • A React Native project (0.71+)
  • An AppSpacer account (or your own self-hosted backend)
  • The AppSpacer CLI installed: npm install -g appspacer-cli

Step 1: Install the SDK

Add the SDK to your project. This provides the bridge between your JavaScript code and the native bundle loader.

npm install react-native-appspacer # or yarn add react-native-appspacer

Don’t forget to install the iOS pods:

cd ios && pod install && cd ..

Step 2: Automatic Native Configuration

Traditionally, this was the hardest step. You had to manually edit AppDelegate.mm on iOS and MainApplication.kt on Android to override where the app loads its bundle from.

AppSpacer automates this entirely:

npx appspacer setup

This command detects your project architecture (including support for the New Architecture) and injects the necessary code. It even creates backups of your files, just in case.


Step 3: Integrate with Your App

The simplest way to use AppSpacer is by wrapping your root component with the withAppSpacer HOC (Higher-Order Component).

import React from 'react'; import { withAppSpacer, UpdateUIType } from 'react-native-appspacer'; const App = () => { return ( // Your App Logic ); }; export default withAppSpacer({ deploymentKey: "YOUR_STAGING_KEY", // Get this from the dashboard updateDialog: true, updateUI: UpdateUIType.GLASS, // Choose a premium theme })(App);

Why use withAppSpacer?

It handles the entire lifecycle for you:

  1. Checking for updates on app start or resume.
  2. Showing a beautiful, customizable update dialog.
  3. Downloading and verifying the bundle hash (SHA-256).
  4. Restarting the app once the update is ready.

Step 4: Your First Release

Now that your app is configured, let’s push a change.

  1. Make a visible change in your App.tsx (e.g., change a background color).
  2. Release the update via the CLI:
appspacer release-react-native android -a my-app-name -d Staging -t 1.0.0 --description "Changed the header color"
  1. Open your app. You should see the update dialog appear, download the package, and restart with your changes live!

Advanced: Safety and Analytics

Atomic Updates & Rollbacks

What happens if you push a bad update that crashes the app? AppSpacer includes Automatic Crash Rollback. If the app crashes shortly after an update, the native module automatically reverts to the previous stable version. No more bricked apps!

Delta Updates

AppSpacer automatically calculates the “diff” between your current and previous versions. Users only download the exact files that changed, reducing download sizes by up to 90%.


Summary

Setting up OTA updates doesn’t have to be a multi-day engineering effort. With AppSpacer, you get production-grade safety, premium UIs, and the fastest deployment pipeline in the React Native ecosystem—all in about 15 minutes.

Ready to dive deeper?

Last updated on