Ever wished you could update your app’s features or fix bugs without waiting for app store approvals? With over-the-air (OTA) updates, you can! OTA updates let you push new JavaScript code and assets directly to your React Native app, so users get the latest changes instantly. In this friendly guide, we’ll walk you through setting up OTA updates using Expo Updates with Expo SDK 51, which works beautifully with React Native 0.75.4. Whether you’re new to React Native or just curious about OTA, this tutorial has you covered—no prior experience needed. Want a head start? Check out prebuilt templates with OTA support at [Instamobile](https:&#x2F;&#x2F;instamobile.io?ref=dpblog) or [Dopebase](https:&#x2F;&#x2F;dopebase.com).

By the end, you’ll have a React Native app ready to roll out updates seamlessly to iOS and Android users, with separate setups for staging and production environments. Let’s dive in!

---

## Prerequisites

Before we get started, make sure you have these tools ready:

- **Node.js** (v20.x or later, LTS recommended): Grab it from [nodejs.org](https:&#x2F;&#x2F;nodejs.org).
- **npm** (v10.x or later, comes with Node.js).
- **Expo CLI**: Our go-to for easy React Native setup.
- **Android Studio** (2024.3.2 or later): For Android development, with Android SDK 35 and NDK r25+.
- **Xcode** (16+): For iOS development (macOS only). You’ll need Xcode 16+ (iOS 18 SDK) to meet App Store requirements.
- A code editor like **VS Code**.
- **Git**: For version control and managing your code.

Got everything? Awesome—let’s set up your project!

---

## Step 1: Create Your React Native Project

Let’s kick things off by setting up a fresh React Native project with Expo.

1. Install Expo CLI globally to make project setup a breeze:
   &#96;&#96;&#96;bash
   npm install -g expo-cli
   &#96;&#96;&#96;

2. Create a new project called &#96;MyApp&#96;:
   &#96;&#96;&#96;bash
   expo init MyApp
   &#96;&#96;&#96;
   Choose the **blank (TypeScript)** template for a modern, type-safe setup. Expo SDK 51 powers this project, working smoothly with React Native 0.75.4.

3. Navigate to your project folder:
   &#96;&#96;&#96;bash
   cd MyApp
   &#96;&#96;&#96;

4. Add the &#96;expo-updates&#96; package for OTA magic:
   &#96;&#96;&#96;bash
   npm install expo-updates@0.25.25
   &#96;&#96;&#96;

5. Test your setup to make sure everything’s working:
   &#96;&#96;&#96;bash
   npx expo start
   &#96;&#96;&#96;
   Press &#96;a&#96; for Android or &#96;i&#96; for iOS (macOS only) to launch the app on an emulator or device. You should see a simple welcome screen.

**Summary**: You’ve set up a new React Native project with Expo SDK 51 and added &#96;expo-updates&#96; to enable OTA updates.

---

## Step 2: Set Up Expo Updates

Now that your project is ready, let’s configure Expo Updates to handle OTA updates. This step connects your app to Expo’s cloud service, so you can push updates directly to users.

#### Project Configuration

1. Update &#96;app.json&#96; to enable OTA updates:
   &#96;&#96;&#96;json
   {
     &quot;expo&quot;: {
       &quot;updates&quot;: {
         &quot;enabled&quot;: true,
         &quot;url&quot;: &quot;https:&#x2F;&#x2F;u.expo.dev&#x2F;your-project-id&quot;,
         &quot;checkAutomatically&quot;: &quot;ON_LOAD&quot;,
         &quot;fallbackToCacheTimeout&quot;: 0
       },
       &quot;ios&quot;: {
         &quot;bundleIdentifier&quot;: &quot;com.myapp.app&quot;
       },
       &quot;android&quot;: {
         &quot;package&quot;: &quot;com.myapp.app&quot;
       }
     }
   }
   &#96;&#96;&#96;
   You’ll get your &#96;project-id&#96; in Step 3 when we set up EAS (Expo Application Services).

2. For bare workflows, link &#96;expo-updates&#96;:
   - **iOS**: Run &#96;npx pod-install&#96; to set up CocoaPods dependencies.
   - **Android**: Add the following to &#96;android&#x2F;app&#x2F;build.gradle&#96;:
     &#96;&#96;&#96;gradle
     apply from: &quot;..&#x2F;..&#x2F;node_modules&#x2F;expo-updates&#x2F;expo-updates.gradle&quot;
     &#96;&#96;&#96;

3. Add update-checking logic to &#96;src&#x2F;App.tsx&#96;:
   &#96;&#96;&#96;typescript
   import { useEffect } from &#x27;react&#x27;;
   import { View, Text } from &#x27;react-native&#x27;;
   import * as Updates from &#x27;expo-updates&#x27;;

   export default function App() {
     useEffect(() =&gt; {
       const checkForUpdates = async () =&gt; {
         try {
           const update = await Updates.checkForUpdateAsync();
           if (update.isAvailable) {
             await Updates.fetchUpdateAsync();
             await Updates.reloadAsync();
           }
         } catch (e) {
           console.error(&#x27;Update check failed:&#x27;, e);
         }
       };
       checkForUpdates();
     }, []);

     return (
       &lt;View style={{ flex: 1, justifyContent: &#x27;center&#x27;, alignItems: &#x27;center&#x27; }}&gt;
         &lt;Text&gt;Welcome to MyApp!&lt;&#x2F;Text&gt;
       &lt;&#x2F;View&gt;
     );
   }
   &#96;&#96;&#96;
   This code checks for new updates when the app starts, downloads them, and reloads the app to apply them.

#### iOS Configuration

1. Open &#96;ios&#x2F;MyApp.xcworkspace&#96; in Xcode and confirm &#96;ExpoUpdates&#96; is linked in the Pods target.
2. Add the &#96;EXUpdatesURL&#96; key to &#96;Info.plist&#96; with the value &#96;https:&#x2F;&#x2F;u.expo.dev&#x2F;your-project-id&#96;.
3. Ensure the app’s bundle identifier matches &#96;app.json&#96;.

#### Android Configuration

1. Update &#96;android&#x2F;app&#x2F;src&#x2F;main&#x2F;res&#x2F;values&#x2F;strings.xml&#96;:
   &#96;&#96;&#96;xml
   &lt;resources&gt;
     &lt;string name=&quot;expo_updates_url&quot;&gt;https:&#x2F;&#x2F;u.expo.dev&#x2F;your-project-id&lt;&#x2F;string&gt;
   &lt;&#x2F;resources&gt;
   &#96;&#96;&#96;
2. Ensure &#96;MainApplication.java&#96; includes &#96;expo-updates&#96;:
   &#96;&#96;&#96;java
   import expo.modules.updates.UpdatesPackage;

   public class MainApplication extends Application implements ReactApplication {
     private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
       @Override
       protected List&lt;ReactPackage&gt; getPackages() {
         return Arrays.asList(
           new MainReactPackage(),
           new UpdatesPackage()
         );
       }
     };
   }
   &#96;&#96;&#96;

**Summary**: You’ve configured Expo Updates in your app, setting up the foundation for OTA updates. Next, we’ll connect to EAS to manage those updates.

---

## Step 3: Connect to EAS for OTA Updates

With your app configured, let’s hook it up to Expo Application Services (EAS), the cloud platform that powers OTA updates by hosting your JavaScript bundles.

1. Log in to Expo:
   &#96;&#96;&#96;bash
   eas login
   &#96;&#96;&#96;
   Follow the browser prompt to authenticate your account.

2. Set up EAS for your project:
   &#96;&#96;&#96;bash
   eas build:configure
   &#96;&#96;&#96;
   This creates an &#96;eas.json&#96; file:
   &#96;&#96;&#96;json
   {
     &quot;build&quot;: {
       &quot;development&quot;: {
         &quot;developmentClient&quot;: true,
         &quot;distribution&quot;: &quot;internal&quot;
       },
       &quot;preview&quot;: {
         &quot;distribution&quot;: &quot;internal&quot;
       },
       &quot;production&quot;: {}
     }
   }
   &#96;&#96;&#96;

3. Initialize OTA updates:
   &#96;&#96;&#96;bash
   eas update:configure
   &#96;&#96;&#96;
   This generates a project ID, which you’ll add to &#96;app.json&#96; under &#96;updates.url&#96;.

4. Build your app to test OTA compatibility:
   &#96;&#96;&#96;bash
   eas build --profile preview --platform all
   &#96;&#96;&#96;
   This creates iOS and Android binaries ready for OTA updates.

**Summary**: You’ve connected your app to EAS, setting up the cloud infrastructure to deliver OTA updates. Now, let’s try pushing your first update!

---

## Step 4: Deploy Your First OTA Update

Now that your app is linked to EAS, let’s deploy an update to see OTA in action.

1. Make a small tweak to your app, like updating the welcome message in &#96;src&#x2F;App.tsx&#96;:
   &#96;&#96;&#96;typescript
   &lt;Text&gt;Welcome to MyApp! (Updated)&lt;&#x2F;Text&gt;
   &#96;&#96;&#96;

2. Publish the update to the production branch:
   &#96;&#96;&#96;bash
   eas update --branch production
   &#96;&#96;&#96;
   This uploads your new JavaScript bundle to EAS.

3. Test the update:
   - Run your app in preview or production mode (avoid Expo Go, as it may interfere with updates).
   - Close and reopen the app to download the update.
   - Check that the updated message appears.

4. For a staging environment, publish to a separate branch:
   &#96;&#96;&#96;bash
   eas update --branch staging
   &#96;&#96;&#96;
   Use the EAS dashboard to manage branches or roll back updates if needed.

**Summary**: You’ve successfully deployed an OTA update, and your app now reflects the latest changes without an app store submission.

---

## Step 5: Set Up Staging and Production Environments

To keep things organized, let’s configure separate OTA updates for staging and production environments, so you can test changes safely before going live.

1. Create a dynamic &#96;app.config.ts&#96; for environment-specific settings:
   &#96;&#96;&#96;typescript
   import { ConfigContext, ExpoConfig } from &#x27;expo&#x2F;config&#x27;;

   export default ({ config }: ConfigContext): ExpoConfig =&gt; ({
     ...config,
     name: process.env.APP_ENV === &#x27;staging&#x27; ? &#x27;MyApp Staging&#x27; : &#x27;MyApp&#x27;,
     slug: &#x27;myapp&#x27;,
     updates: {
       enabled: true,
       url: &#96;https:&#x2F;&#x2F;u.expo.dev&#x2F;your-project-id&#96;,
       checkAutomatically: &#x27;ON_LOAD&#x27;,
       fallbackToCacheTimeout: 0,
     },
     ios: {
       bundleIdentifier: process.env.APP_ENV === &#x27;staging&#x27; ? &#x27;com.myapp.staging&#x27; : &#x27;com.myapp.app&#x27;,
     },
     android: {
       package: process.env.APP_ENV === &#x27;staging&#x27; ? &#x27;com.myapp.staging&#x27; : &#x27;com.myapp.app&#x27;,
     },
   });
   &#96;&#96;&#96;

2. Build for each environment:
   - **Staging**: &#96;eas build --profile preview --platform all&#96;
   - **Production**: &#96;eas build --profile production --platform all&#96;

3. Publish updates for each environment:
   &#96;&#96;&#96;bash
   APP_ENV=staging eas update --branch staging
   APP_ENV=production eas update --branch production
   &#96;&#96;&#96;

4. Test the environments:
   - Install the staging build and verify the staging branch updates.
   - Install the production build and confirm the production branch updates.

**Summary**: You’ve set up separate staging and production environments, allowing safe testing of updates before they reach all users.

---

## Step 6: Enhance Your OTA Workflow

With your OTA system up and running, let’s explore ways to make it even better.

- **Rollbacks**: If an update goes wrong, revert it using the EAS dashboard or CLI:
  &#96;&#96;&#96;bash
  eas update:rollback --branch production
  &#96;&#96;&#96;
- **A&#x2F;B Testing**: Create branches like &#96;experiment-a&#96; and &#96;experiment-b&#96; to test new features with different user groups.
- **Analytics**: Add &#96;expo-analytics&#96; to track how users interact with updates and catch errors early.
- **Optimize Updates**: Keep update sizes small by excluding unused assets and using code-splitting techniques.

**Summary**: Enhance your OTA setup with rollbacks, A&#x2F;B testing, analytics, and optimization for a smooth and reliable update process.

---

## Troubleshooting Tips

- **Updates Not Loading**: Ensure you’re not in debug mode, as it skips OTA updates. Test with preview or production builds.
- **iOS Issues**: Verify the &#96;EXUpdatesURL&#96; in &#96;Info.plist&#96; matches your EAS project ID.
- **Android Problems**: Check &#96;expo-updates&#96; linking in &#96;android&#x2F;app&#x2F;build.gradle&#96; and confirm &#96;expo_updates_url&#96; is set in &#96;strings.xml&#96;.
- **EAS Setup Errors**: If &#96;eas update:configure&#96; fails, manually check &#96;eas.json&#96; and your project ID.

---

## Conclusion

You’ve built a React Native app with OTA updates using Expo Updates and Expo SDK 51, making it easy to push new features and fixes to iOS and Android users instantly. With separate staging and production environments, you’re ready to test and deploy like a pro. Want to speed things up? Explore prebuilt templates with OTA support at [Instamobile](https:&#x2F;&#x2F;instamobile.io) or [Dopebase](https:&#x2F;&#x2F;dopebase.com). For more advanced features, check out [Expo’s documentation](https:&#x2F;&#x2F;docs.expo.dev) or join the React Native community at [reactnative.dev](https:&#x2F;&#x2F;reactnative.dev).

## Additional Resources
- [dopebase.com](https:&#x2F;&#x2F;dopebase.com) - Mobile app development resources and templates
- [instamobile.io](https:&#x2F;&#x2F;instamobile.io) - Production-ready React Native templates
- [instaflutter.com](https:&#x2F;&#x2F;instaflutter.com) - Flutter templates for cross-platform development
- [reactnative.dev](https:&#x2F;&#x2F;reactnative.dev) - Official React Native documentation
- [docs.expo.dev](https:&#x2F;&#x2F;docs.expo.dev) - Expo SDK and EAS documentation

A friendly, step-by-step guide to setting up over-the-air (OTA) updates in React Native using Expo Updates with Expo SDK 51, so you can roll out new features to your iOS and Android apps instantly.

Configuring Over-the-Air Updates in React Native with Expo Updates

About

Legal

Products

Resources

Category:

Tags: