Over-the-Air (OTA) Updates with CodePush in React Native

Oct 28, 2025 |

12 minutes read

Why Over-the-Air (OTA) Updates Matter in React Native

Delivering app updates instantly without waiting for App Store or Play Store approvals is one of the biggest advantages of React Native. Using Microsoft CodePush, developers can publish Over-the-Air (OTA) updates that reach users in seconds.

This guide explains:

What CodePush is and how OTA updates work
How to set it up in a React Native project
How to publish and roll back updates
Versioning tips and best practices for safe deployments

What Is CodePush?

CodePush is a service from Microsoft that enables React Native developers to push live updates directly to users’ devices. Instead of reinstalling the entire app, CodePush delivers updated JavaScript bundles and assets seamlessly in the background.

Key Benefits

Instant delivery: No waiting for app store reviews or approvals.
Lightweight updates: Only the modified JS or assets are downloaded.
Rollback-ready: Revert bad releases instantly if something breaks.
Controlled rollout: Gradually roll out updates to a percentage of users.

How OTA Updates Work

You release a new JavaScript bundle using the CodePush CLI.
When users open your app, it checks the CodePush server for updates.
If a newer bundle exists, it’s downloaded and stored locally.
On the next app restart, the new version of the JS bundle is loaded.

Note: CodePush cannot modify native code (e.g., new permissions or native libraries). Such changes still require publishing a new version to the App Store or Play Store.

Setting Up CodePush in React Native

1. Install the Dependency


npm install react-native-code-push

2. Link or Autolink

React Native 0.60+ supports autolinking, so CodePush should be detected automatically. If it isn’t, link it manually:


npm install react-native-code-push

3. Configure for iOS

1. Open your project in Xcode.

2. Add your deployment key in Info.plist:


CodePushDeploymentKey
YOUR_IOS_DEPLOYMENT_KEY

3. Update your AppDelegate file to load bundles from CodePush:


#import 

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [CodePush bundleURL];
#endif
}

4. Configure for Android

1. Add your deployment key in android/app/build.gradle:


buildConfigField("String", "CODEPUSH_KEY", '"YOUR_ANDROID_DEPLOYMENT_KEY"')

2. Modify MainApplication.java:


import com.microsoft.codepush.react.CodePush;

@Override
protected String getJSBundleFile() {
  return CodePush.getJSBundleFile();
}

5. Wrap Your App Component


- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [CodePush bundleURL];
#endif
}

Releasing Updates

Once your app is configured, you can push new JS updates directly—no app store resubmissions needed.

1. Create a Deployment


appcenter apps create -d MyApp -o react-native -p ios

2. Add a Deployment Environment


appcenter codepush deployment add -a MyApp Production

3. Publish an Update


appcenter codepush release-react -a MyApp-iOS -d Production

Flags explained:

-a: App name
-d: Deployment target (e.g., Staging or Production)

4. Roll Back a Problematic Release

appcenter codepush rollback -a MyApp -d Production

Checking for Updates Manually


import CodePush from 'react-native-code-push';

const checkForUpdates = async () => {
  const update = await CodePush.checkForUpdate();
  if (update) {
    console.log('Downloading update...');
    await update.download();
    await update.install(CodePush.InstallMode.IMMEDIATE);
  }
};

Versioning and Rollbacks

Each deployment key represents a separate environment (e.g., Staging or Production).
Use semantic versioning (semver) to track app versions.
If a new bundle causes issues, you can instantly revert to the last stable version with a rollback command.

Best Practices

Always test in Staging before releasing to Production.
Avoid native code changes—CodePush cannot handle those.
Add descriptive release notes for clarity in update history.
Use phased rollouts to minimize risk: appcenter codepush patch -a MyApp -d Production -r 20%

Plan for fallback—CodePush can automatically revert to the previous bundle if the new one crashes.

Enable seamless OTA updates for your React Native apps today.

The Way Forward

CodePush brings continuous delivery to React Native apps. You can roll out bug fixes, feature tweaks, and design updates quickly without store delays.

Use CodePush for hotfixes, UI or text updates, A/B testing, and continuous delivery workflows.

Next step: integrate CodePush into your CI/CD pipeline (e.g., Fastlane or GitHub Actions) for automated OTA releases.

Free Consultation

Lopa Das

Oct 28 2025

With over 13 years of experience, Lopa Das is a seasoned professional at iFlair Web Technologies Pvt Ltd, specializing in web and mobile app development. Her technical expertise spans across Laravel, PHP, CodeIgniter, CakePHP, React, Vue.js, Nuxt.js, iOS, Android, Flutter, and React Native. Known for her exceptional skills in team handling, client communication, presales, and risk analysis, Lopa ensures seamless project execution from start to finish. Her proficiency in Laravel CRM, Next.js, and mobile app development makes her a valuable asset in delivering robust, scalable solutions.