CodePush Multi-Tenant Documentation

React Native Integration

Step-by-step guide to configure CodePush for iOS and Android platforms.

Installation

First, install the React Native CodePush SDK in your project:

npm install --save react-native-code-push

React Native Version

For React Native 0.60+, auto-linking is supported. For older versions, follow manual linking instructions.

iOS Configuration

iOS Setup Steps

1. Add Deployment Key

Open your ios/[YourApp]/Info.plist file and add your deployment key:

<key>CodePushDeploymentKey</key>
<string>YOUR_IOS_DEPLOYMENT_KEY</string>

2. Configure Bundle URL (Release Mode)

For release builds, modify your AppDelegate.m (or AppDelegate.mm):

#import <CodePush/CodePush.h>

@implementation AppDelegate

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

@end

3. Configure for Staging/Production

To use different deployment keys for different environments, use build configurations:

// In Info.plist
<key>CodePushDeploymentKey</key>
<string>$(CODEPUSH_KEY)</string>

// In Build Settings -> User-Defined
// For Debug: CODEPUSH_KEY = "your-staging-key"
// For Release: CODEPUSH_KEY = "your-production-key"

Android Configuration

Android Setup Steps

1. Add Deployment Key

Open android/app/src/main/res/values/strings.xml and add:

<resources>
    <string name="app_name">YourApp</string>
    <string name="CodePushDeploymentKey">YOUR_ANDROID_DEPLOYMENT_KEY</string>
</resources>

2. Update MainApplication.java

Modify android/app/src/main/java/.../MainApplication.java:

import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {
    
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
        
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new CodePush(getResources().getString(R.string.CodePushDeploymentKey), 
                           getApplicationContext(), 
                           BuildConfig.DEBUG)
            );
        }
    };
}

3. Configure for Multiple Environments

Create different strings.xml files for different build variants:

// android/app/src/debug/res/values/strings.xml
<string name="CodePushDeploymentKey">staging-deployment-key</string>

// android/app/src/release/res/values/strings.xml  
<string name="CodePushDeploymentKey">production-deployment-key</string>

JavaScript Integration

App Component Setup

Basic Integration

Wrap your main app component with CodePush:

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import CodePush from 'react-native-code-push';

class MyApp extends Component {
  componentDidMount() {
    // Sync with CodePush server on app start
    CodePush.sync();
  }

  render() {
    return (
      <View>
        <Text>My CodePush App</Text>
      </View>
    );
  }
}

// Export with CodePush wrapper
export default CodePush(MyApp);

Advanced Configuration

Configure CodePush with custom options:

const codePushOptions = {
  checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
  installMode: CodePush.InstallMode.ON_NEXT_RESTART,
  updateDialog: {
    title: "Update Available",
    description: "A new update is available. Would you like to install it?",
    mandatoryUpdateMessage: "An update is required to continue.",
    mandatoryContinueButtonLabel: "Continue",
    optionalIgnoreButtonLabel: "Later",
    optionalInstallButtonLabel: "Install",
  },
};

export default CodePush(codePushOptions)(MyApp);

Update Strategies

1. Silent Updates

CodePush.sync({
  installMode: CodePush.InstallMode.ON_NEXT_RESTART,
  updateDialog: false, // Silent update
});

2. Immediate Updates

CodePush.sync({
  installMode: CodePush.InstallMode.IMMEDIATE,
});

3. Custom Update UI

componentDidMount() {
  CodePush.checkForUpdate()
    .then((update) => {
      if (update) {
        // Show custom update prompt
        this.showUpdateDialog(update);
      }
    });
}

showUpdateDialog = (update) => {
  Alert.alert(
    "Update Available",
    update.description,
    [
      { text: "Later", style: "cancel" },
      { text: "Install", onPress: () => this.installUpdate(update) }
    ]
  );
};

Testing Your Integration

1. Build and Deploy

# Build your app for testing
npx react-native run-ios --configuration Release
npx react-native run-android --variant=release

2. Deploy Test Update

# Make a small change (e.g., text update) then deploy
code-push release-react MyApp ios
code-push release-react MyApp android

Configuration Complete!

Your React Native app is now configured to receive CodePush updates.

Learn Deployment Strategies CLI Reference

Next Steps

Deployment Strategies →

Learn about rollouts, targeting, and advanced deployment options

Troubleshooting →

Common issues and solutions for CodePush integration