Skip to main content

Installation & Configuration

Set up AppsOnAir CodePush in your React Native app, including installation, configuration, and integration of the deployment key and server URL.

How to Check React Native Architecture (Old vs New)​

Android​

  • Open android/gradle.properties.

  • Look for this flag:

newArchEnabled=true

If true, new architecture is enabled.

iOS​

  • Open ios/Podfile.

  • Look for this flag:

use_react_native!(
  :fabric_enabled => true,
)

If true, new architecture is enabled.

Install CodePush SDK​

Run the following command to install react-native-code-push in your React Native project:

Old Architecture​

Terminal
npm install react-native-code-push

New Architecture​

Terminal
npm install @code-push-next/react-native-code-push
for IOS

Don't forgot to install pods! (for iOS)

Note

Minimum deployment target: iOS 15.0

Configure Expo for New Architecture​

Note

This setup only works if your project is using the New Architecture.

Install expo-build-properties​

This step is only required if your iOS minimum deployment target is below 15.5, as codepush with Expo requires iOS 15.5 or above.

Terminal
npx expo install expo-build-properties

Update app.json​

app.json
{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "deploymentTarget": "15.5"
          }
        }
      ],
      [
        "@code-push-next/react-native-code-push/expo",
        {
          "android": {
            "CodePushDeploymentKey": "YOUR_ANDROID_KEY",
            "CodePushServerURL": "https://codepush.appsonair.com"
          },
          "ios": {
            "CodePushDeploymentKey": "YOUR_IOS_KEY",
            "CodePushServerURL": "https://codepush.appsonair.com"
          }
        }
      ]
    ]
  }
}

Replace <YOUR_ANDROID_KEY> and <YOUR_IOS_KEY> with your actual deployment keys.

Create or Update metro.config.js​

To support .cjs files used by the CodePush plugin, update your metro.config.js:

const { getDefaultConfig } = require("@expo/metro-config");

const config = getDefaultConfig(__dirname);
config.resolver.sourceExts.push("cjs");

module.exports = config;

Install @react-native-community/cli as Dev Dependency​

Terminal
npm install @react-native-community/cli --save-dev

Prebuild Native Projects​

Generate native iOS and Android code based on your updated config and plugins:

Terminal
npx expo prebuild

This command applies all plugin changes and prepares the native environment.

Expo is now configured to support CodePush with New Architecture.You can skip native setup and move on to Project Setup.

Configure Android​

Update android/settings.gradle (Only required in Old Architecture)​

Add the following lines to include the CodePush module:

settings.gradle
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

Update android/app/build.gradle​

Apply the CodePush Gradle script by adding this line:

build.gradle (Old Architecture)
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
build.gradle (New Architecture)
apply from: "../../node_modules/@code-push-next/react-native-code-push/android/codepush.gradle"

Modify MainApplication.java or MainApplication.kt​

Find your MainApplication file and update it as follows:

MainApplication.java
// 1. Import the CodePush package.
import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

    // 2. Override getJSBundleFile() to let CodePush handle the bundle location.
    @Override
    protected String getJSBundleFile() {
      return CodePush.getJSBundleFile();
    }
  };
}

Update android/app/src/main/res/values/strings.xml​

Add your Deployment Key and CodePush Server URL inside <resources>:

strings.xml
<resources>
    <string name="app_name">MyApp</string>
    <string name="CodePushDeploymentKey">DEPLOYMENT_KEY</string>
    <string name="CodePushServerUrl">CODE_PUSH_SERVER_URL</string>
</resources>

Configure iOS​

note
CodePush only works when the minimum deployment target is set to iOS 15.5 or higher. Make sure to update your ios/Podfile and Xcode project settings accordingly to avoid compatibility issues.

Modify AppDelegate.mm​

Import CodePush at the top, then modify sourceURLForBridge to use CodePush in release mode:

AppDelegate.mm
// 1. Import the CodePush package.
#import <CodePush/CodePush.h>

// 2. Override sourceURLForBridge() to let CodePush handle the bundle location.
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
  #else
    return [CodePush bundleURL];
  #endif
}

Modify ios/MyApp/Info.plist​

Add your Deployment Key and CodePush Server URL inside the <dict> block:

Info.plist
<key>CodePushDeploymentKey</key>
<string>DEPLOYMENT_KEY</string>
<key>CodePushServerURL</key>
<string>CODE_PUSH_SERVER_URL</string>

📺 Video Tutorial​

To understand how to set up AppsOnAir account and CodePush , watch the full walkthrough video below:

Watch the tutorial

Watch the tutorial