Get Started with the React Native Client SDK

Article
06/12/2023

Important

Visual Studio App Center is scheduled for retirement on March 31, 2025. While you can continue to use Visual Studio App Center until it is fully retired, there are several recommended alternatives that you may consider migrating to.

Learn more about support timelines and alternatives.

Once you've followed the general purpose "getting started" instructions for setting up your CodePush account, you can start integrating CodePush in your React Native app by running the following command from within your app's root directory:

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

As with all other React Native plugins, the integration experience is different for iOS and Android, so follow the setup steps depending on the platform(s) you target for your app. Note, if you're targeting both platforms it's recommended to create separate CodePush applications for each platform.

If you want to see how other projects have integrated with CodePush, see the example apps, which are provided by the community. Additionally, if you want to familiarize yourself with CodePush + React Native, see the getting started videos produced by Bilal Budhani and Deepak Sisodiya.

Important

This guide assumes you've used the react-native init command to initialize your React Native project. As of March 2017, the command create-react-native-app can also be used to initialize a React Native project. If using this command, run npm run eject in your project's home directory to get a project similar to what react-native init would've created.

iOS Setup

Once you have the CodePush plugin, you must integrate it into the Xcode project of your React Native app and configure it correctly.

Plugin Installation and Configuration for React Native 0.60 version and above (iOS)

Run cd ios && pod install && cd .. to install all the necessary CocoaPods dependencies.
Open up the AppDelegate.m file, and add an import statement for the CodePush headers:
```
#import <CodePush/CodePush.h>
```
Find the following line of code, which sets the source URL for bridge for production releases:
```
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
```
Replace it with this line:
```
return [CodePush bundleURL];
```
This change configures your app to always load the most recent version of your app's JS bundle. On the first launch, this corresponds to the file that was compiled with the app. However, after an update has been pushed via CodePush, this returns the location of the most recently installed update.

Note

The bundleURL method assumes your app's JS bundle is named main.jsbundle. If you've configured your app to use a different file name, call the bundleURLForResource: method (which assumes you're using the .jsbundle extension) or bundleURLForResource:withExtension: method instead, to overwrite that default behavior.

Typically, you're only going to want to use CodePush to resolve your JS bundle location within release builds. We recommend using the DEBUG pre-processor macro to dynamically switch between using the packager server and CodePush, depending on whether you're debugging or not. This makes it much simpler to ensure you get the right behavior you want in production, while still using the Chrome Dev Tools, live reload, etc. at debug-time.

Your sourceURLForBridge method should look like this:
```
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}
```
Add the Deployment key to Info.plist: To let the CodePush runtime know which deployment it should query for updates against, open your app's Info.plist file and add a new entry named CodePushDeploymentKey, whose value is the key of the deployment you want to configure this app against (like the key for the Staging deployment for the FooBar app). You can retrieve this value by going to the app's Distribute UI on your AppCenter dashboard or running appcenter codepush deployment list --app <ownerName>/<appName> -k with the CodePush CLI (the -k flag is necessary since keys aren't displayed by default) and copying the value of the Deployment Key column that corresponds to the deployment you want to use (see below). Using the deployment's name (like Staging) won't work. That "friendly name" is intended only for authenticated management usage from the CLI, and not for public consumption within your app.

To effectively make use of the Staging and Production deployments that were created along with your CodePush app, refer to the multi-deployment testing docs below before actually moving your app's usage of CodePush into production.

Note

If you need to dynamically use a different deployment, you can also override your deployment key in JS code using Code-Push options*

Plugin Installation for React Native lower than 0.60 (iOS)

To accommodate as many developer preferences as possible, the CodePush plugin supports iOS installation via three mechanisms:

RNPM - React Native Package Manager (RNPM) is an awesome tool that provides the simplest installation experience possible for React Native plugins. If you're already using it, or you want to use it, then we recommend this approach.
CocoaPods - If you're building a native iOS app that's embedding React Native into it, or you prefer using CocoaPods, then we recommend using the Podspec file that we ship as part of our plugin.
"Manual" - If you don't want to depend on any additional tools or are fine with a few extra installation steps (it's a one-time thing), then go with this approach.

Plugin Installation (iOS - RNPM)

As of v0.27 of React Native, rnpm link has already been merged into the React Native CLI. Run:
```
react-native link react-native-code-push
```
If your app uses a version of React Native lower than v0.27, execute the following command:
```
 rnpm link react-native-code-push
```
Note

If you don't already have RNPM installed, you can do so by running npm i -g rnpm and then executing the above command. If you already have RNPM installed, make sure you have v1.9.0+ to benefit from this one step install.
You'll be prompted for the deployment key you want to use. If you don't already have it, you can retrieve this value by running appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys, or you can choose to ignore it (by hitting <ENTER>) and add it in later. To get started, we recommend using your Staging deployment key, so that you can test out the CodePush end-to-end.

Plugin Installation (iOS - CocoaPods)

Add the React Native and CodePush plugin dependencies to your Podfile, pointing at the path where NPM has installed modules

# React Native requirements
pod 'React', :path => '../node_modules/react-native', :subspecs => [
   'Core',
   'CxxBridge', # Include this for RN >= 0.47
   'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
   'RCTText',
   'RCTNetwork',
   'RCTWebSocket', # Needed for debugging
   'RCTAnimation', # Needed for FlatList and animations running on native UI thread
   # Add any other subspecs you want to use in your project
]
# Explicitly include Yoga if you're using RN >= 0.42.0
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

# CodePush plugin dependency
pod 'CodePush', :path => '../node_modules/react-native-code-push'

Note

File paths for dependencies must be relative to your app's Podfile location.

Note

The project's JWT library must be version 3.0.x or higher

Run pod install

Note

The CodePush .podspec depends on the React pod, and so to ensure that it can correctly use the version of React Native that your app is built with, make sure to define the React dependency in your app's Podfile as explained in the React Native integration documentation.

Plugin Installation (iOS - Manual)

Open your app's Xcode project
Find the CodePush.xcodeproj file within the node_modules/react-native-code-push/ios directory (or node_modules/react-native-code-push for <=1.7.3-beta installations) and drag it into the Libraries node in Xcode
Select the project node in Xcode and select the "Build Phases" tab of your project configuration.
Drag libCodePush.a from Libraries/CodePush.xcodeproj/Products into the "Link Binary With Libraries" section of your project's "Build Phases" configuration.
Click the plus sign underneath the "Link Binary With Libraries" list and select the libz.tbd library underneath the iOS 9.1 node.

Note

Alternatively, if you prefer, you can add the -lz flag to the Other Linker Flags field in the Linking section of the Build Settings.

Plugin Configuration for React Native lower than 0.60 (iOS)

Note

If you used RNPM or react-native link to automatically link the plugin, these steps have already been done for you so you may skip this section.

Once your Xcode project has been set up to build/link the CodePush plugin, you need to configure your app to check CodePush for the location of your JS bundle, since it's responsible for synchronizing it with updates that are released to the CodePush server. To do this, follow these steps:

Open up the AppDelegate.m file, and add an import statement for the CodePush headers:
```
#import <CodePush/CodePush.h>
```

For React Native 0.59 - 0.59.10:

Find the following line of code, which sets the source URL for bridge for production releases:
```
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
```
Replace it with this line:
```
return [CodePush bundleURL];
```

For React Native 0.58 and below:

Find the following line of code, which loads your JS Bundle from the app binary for production releases:

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

Replace it with this line:
```
jsCodeLocation = [CodePush bundleURL];
```

This change configures your app to always load the most recent version of your app's JS bundle. On the first launch, this corresponds to the file that was compiled with the app. However, after an update has been pushed via CodePush, this returns the location of the most recently installed update.

Note

The bundleURL method assumes your app's JS bundle is named main.jsbundle. If you've configured your app to use a different file name, call the bundleURLForResource: method (which assumes you're using the .jsbundle extension) or bundleURLForResource:withExtension: method instead, to overwrite that default behavior.

Typically, you're only going to want to use CodePush to resolve your JS bundle location within release builds. We recommend using the DEBUG pre-processor macro to dynamically switch between using the packager server and CodePush, depending on whether you're debugging or not. This makes it much simpler to ensure you get the right behavior you want in production, while still using the Chrome Dev Tools, live reload, etc. at debug-time.

For React Native 0.59 - 0.59.10:

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

For React Native 0.58 and below:

NSURL *jsCodeLocation;

#ifdef DEBUG
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
    jsCodeLocation = [CodePush bundleURL];
#endif

To let the CodePush runtime know which deployment it should query for updates against, open the project's Info.plist file and add a new entry named CodePushDeploymentKey, whose value is the key of the deployment you want to configure this app against (like the key for the Staging deployment for the FooBar app). You can retrieve this value by running appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys in the CodePush CLI and copying the value of the Deployment Key column that corresponds to the deployment you want to use (see below). Using the deployment's name (like Staging) won't work. That "friendly name" is intended only for authenticated management usage from the CLI, and not for public consumption within your app.

Staging Key

To effectively make use of the Staging and Production deployments that were created along with your CodePush app, refer to the multi-deployment testing docs below before actually moving your app's usage of CodePush into production.

HTTP exception domains configuration (iOS)

CodePush plugin makes HTTPS requests to the following domains:

codepush.appcenter.ms
codepush.blob.core.windows.net
codepushupdates.azureedge.net

If you want to change the default HTTP security configuration for any of these domains, define the NSAppTransportSecurity (ATS) configuration inside the project's Info.plist file:

<plist version="1.0">
  <dict>
    <!-- ...other configs... -->

    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSExceptionDomains</key>
      <dict>
        <key>codepush.appcenter.ms</key>
        <dict><!-- read the ATS Apple Docs for available options --></dict>
      </dict>
    </dict>

    <!-- ...other configs... -->
  </dict>
</plist>

Before doing anything, see the Apple docs first.

Code Signing setup (iOS)

You can self-sign bundles during release and verify their signatures before installation of update. For more info about Code Signing, see the relevant code-push documentation section.

To configure a Public Key for bundle verification, you need to add a record in Info.plist with the name CodePushPublicKey and string value of public key content. Example:

<plist version="1.0">
  <dict>
    <!-- ...other configs... -->

    <key>CodePushPublicKey</key>
        <string>-----BEGIN PUBLIC KEY-----
MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANkWYydPuyOumR/sn2agNBVDnzyRpM16NAUpYPGxNgjSEp0etkDNgzzdzyvyl+OsAGBYF3jCxYOXozum+uV5hQECAwEAAQ==
-----END PUBLIC KEY-----</string>

    <!-- ...other configs... -->
  </dict>
</plist>

Android Setup

To integrate CodePush into your Android project, do the following steps:

Plugin Installation (Android)

Plugin Installation and Configuration for React Native 0.60 version and above (Android)

In your android/settings.gradle file, make the following additions:

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

In your android/app/build.gradle file, add the codepush.gradle file as an additional build task definition:
```
...
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...
```

Update the MainApplication.java (or MainApplicationReactNativeHost.java if you are using React Native 0.68 - 0.70) file to use CodePush via the following changes:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

Add the Deployment key to strings.xml:

To let the CodePush runtime know which deployment it should query for updates, open your app's strings.xml file and add a new string named CodePushDeploymentKey, whose value is the key of the deployment you want to configure this app against (like the key for the Staging deployment for the FooBar app). You can retrieve this value by running appcenter codepush deployment list -a <ownerName>/<appName> -k in the App Center CLI (the -k flag is necessary since keys aren't displayed by default) and copying the value of the Key column that corresponds to the deployment you want to use (see below). Using the deployment's name (like Staging) won't work. The "friendly name" is intended only for authenticated management usage from the CLI, and not for public consumption within your app.

To effectively make use of the Staging and Production deployments that were created along with your CodePush app, refer to the multi-deployment testing docs below before actually moving your app's usage of CodePush into production.

Your strings.xml file should look like this:
```
 <resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>
```
Note

If you need to dynamically use a different deployment, you can also override your deployment key in JS code using Code-Push options*

Plugin Installation for React Native lower than 0.60 (Android)

To accommodate as many developer preferences as possible, the CodePush plugin supports Android installation via two mechanisms:

RNPM - React Native Package Manager (RNPM) is an awesome tool that provides the simplest installation experience possible for React Native plugins. If you're already using it, or you want to use it, then we recommend this approach.
"Manual" - If you don't want to depend on any additional tools or are fine with a few extra installation steps (it's a one-time thing), then go with this approach.

Note

Because of a code change from the React Native repository, if your installed React Native version ranges from 0.29 to 0.32, we recommend following the manual steps to set up correctly.

Plugin Installation (Android - RNPM)

As of v0.27 of React Native, rnpm link has already been merged into the React Native CLI. Run:
```
react-native link react-native-code-push
```
If your app uses a version of React Native lower than v0.27, run the next command:
```
rnpm link react-native-code-push
```
Note

If you don't already have RNPM installed, you can do so by running npm i -g rnpm and then executing the above command.
If you're using RNPM >=1.6.0, you'll be prompted for the deployment key you want to use. If you don't already have it, you can retrieve this value by running appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys, or you can choose to ignore it (by hitting <ENTER>) and add it in later. To get started, we recommend using your Staging deployment key, so that you can test out the CodePush end-to-end.

And that's it for installation using RNPM! Continue below to the Plugin Configuration section to complete the setup.

Plugin Installation (Android - Manual)

In your android/settings.gradle file, make the following additions:

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

In your android/app/build.gradle file, add the :react-native-code-push project as a compile-time dependency:
```
...
dependencies {
    ...
    compile project(':react-native-code-push')
}
```
In your android/app/build.gradle file, add the codepush.gradle file as an additional build task definition:
```
...
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...
```

Plugin Configuration for React Native lower than 0.60 (Android)

Note

If you used RNPM or react-native link to automatically link the plugin, these steps have already been done for you so you may skip this section.

After installing the plugin and syncing your Android Studio project with Gradle, you need to configure your app to check CodePush for the location of your JS bundle, since it will "take control" of managing the current and all future versions. To do this:

For React Native >= v0.29

If you're integrating CodePush into React Native application, do the following steps:

Update the MainApplication.java file to use CodePush via the following changes:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }

        @Override
        protected List<ReactPackage> getPackages() {
            // 3. Instantiate an instance of the CodePush runtime and add it to the list of
            // existing packages, specifying the right deployment key. If you don't already
            // have it, you can run "appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys" to retrieve your key.
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
            );
        }
    };
}

If you're integrating React Native into existing native application, do the following steps:

Update MyReactActivity.java (it could be named differently in your app) file to use CodePush via the following changes:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MyReactActivity extends Activity {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        mReactInstanceManager = ReactInstanceManager.builder()
                // ...
                // Add CodePush package
                .addPackage(new CodePush("deployment-key-here", getApplicationContext(), BuildConfig.DEBUG))
                // Get the JS Bundle File via CodePush
                .setJSBundleFile(CodePush.getJSBundleFile())
                // ...

                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

    ...
}

For React Native v0.19 - v0.28

Update the MainActivity.java file to use CodePush via the following changes:

...
// 1. Import the plugin class (if you used RNPM to install the plugin, this
// should already be done for you automatically so you can skip this step).
import com.microsoft.codepush.react.CodePush;

public class MainActivity extends ReactActivity {
    // 2. Override the getJSBundleFile method to let
    // the CodePush runtime determine where to get the JS
    // bundle location from on each app start
    @Override
    protected String getJSBundleFile() {
        return CodePush.getJSBundleFile();
    }

    @Override
    protected List<ReactPackage> getPackages() {
        // 3. Instantiate an instance of the CodePush runtime and add it to the list of
        // existing packages, specifying the right deployment key. If you don't already
        // have it, you can run "appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys" to retrieve your key.
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new CodePush("deployment-key-here", this, BuildConfig.DEBUG)
        );
    }

    ...
}

Background React Instances

Note

This section is only necessary if you're explicitly launching a React Native instance without an Activity (for example, from within a native push notification receiver). For these situations, CodePush must be told how to find your React Native instance.

To update/restart your React Native instance, CodePush must be configured with a ReactInstanceHolder before attempting to restart an instance in the background. This is done in your Application implementation.

For React Native >= v0.29

Update the MainApplication.java file to use CodePush via the following changes:

...
// 1. Declare your ReactNativeHost to extend ReactInstanceHolder. ReactInstanceHolder is a subset of ReactNativeHost, so no additional implementation is needed.
import com.microsoft.codepush.react.ReactInstanceHolder;

public class MyReactNativeHost extends ReactNativeHost implements ReactInstanceHolder {
  // ... usual overrides
}

// 2. Provide your ReactNativeHost to CodePush.

public class MainApplication extends Application implements ReactApplication {

   private final MyReactNativeHost mReactNativeHost = new MyReactNativeHost(this);

   @Override
   public void onCreate() {
     CodePush.setReactInstanceHolder(mReactNativeHost);
     super.onCreate();
  }
}

For React Native v0.19 - v0.28

Before v0.29, React Native didn't provide a ReactNativeHost abstraction. If you're launching a background instance, you'll likely have built your own, which should now implement ReactInstanceHolder. Once that's done:

// 1. Provide your ReactInstanceHolder to CodePush.

public class MainApplication extends Application {

   @Override
   public void onCreate() {
     // ... initialize your instance holder
     CodePush.setReactInstanceHolder(myInstanceHolder);
     super.onCreate();
  }
}

To effectively make use of the Staging and Production deployments that we recommend you created along with your CodePush app, refer to the multi-deployment testing docs below before actually moving your app's usage of CodePush into production.

Code Signing setup (Android)

Starting with CLI version 2.1.0 you can self-sign bundles during release and verify its signature before installation of update. For more info about Code Signing, see the relevant code-push documentation section. To use Public Key for Code Signing, do the following steps:

Add a CodePushPublicKey string item to /path_to_your_app/android/app/src/main/res/values/strings.xml. It may look like this:

<resources>
   <string name="app_name">my_app</string>
   <string name="CodePushPublicKey">-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtPSR9lkGzZ4FR0lxF+ZA
P6jJ8+Xi5L601BPN4QESoRVSrJM08roOCVrs4qoYqYJy3Of2cQWvNBEh8ti3FhHu
tiuLFpNdfzM4DjAw0Ti5hOTfTixqVBXTJPYpSjDh7K6tUvp9MV0l5q/Ps3se1vud
M1/X6g54lIX/QoEXTdMgR+SKXvlUIC13T7GkDHT6Z4RlwxkWkOmf2tGguRcEBL6j
ww7w/3g0kWILz7nNPtXyDhIB9WLH7MKSJWdVCZm+cAqabUfpCFo7sHiyHLnUxcVY
OTw3sz9ceaci7z2r8SZdsfjyjiDJrq69eWtvKVUpredy9HtyALtNuLjDITahdh8A
zwIDAQAB
-----END PUBLIC KEY-----</string>
</resources>

For React Native <= v0.60 you should configure the `CodePush` instance to use this parameter using one of the following approaches

Using constructor

new CodePush(
    "deployment-key",
    getApplicationContext(),
    BuildConfig.DEBUG,
    R.string.CodePushPublicKey)

Using builder

new CodePushBuilder("deployment-key-here",getApplicationContext())
   .setIsDebugMode(BuildConfig.DEBUG)
   .setPublicKeyResourceDescriptor(R.string.CodePushPublicKey)
   .build()

Windows Setup

Once you've acquired the CodePush plugin, you need to integrate it into the Visual Studio project of your React Native app and configure it correctly. To do this, take the following steps:

Plugin Installation and Configuration for React Native version 0.63.6 and above (Windows)

Plugin Installation (Windows-npx)

Once the plugin has been downloaded, run npx react-native autolink-windows in your application's root directory to automatically add the CodePush c++ project to your application's windows solution file.

Plugin Configuration (Windows)

Replace the following files located at windows/<app name> with those in the CodePushDemoAppCpp example app in this repo found at Examples/CodePushDemoAppCpp/windows/CodePushDemoAppCpp:
1. app.h
2. app.cpp
3. app.xaml
In the above files, replace any occurance of CodePushDemoAppCpp with the name of your application
Enter your application's app version and deployment key to the configMap object at the top of your app's OnLaunched method in App.cpp:

//...
void App::OnLaunched(activation::LaunchActivatedEventArgs const& e)
{
    winrt::Microsoft::CodePush::ReactNative::CodePushConfig::SetHost(Host());
    auto configMap{ winrt::single_threaded_map<hstring, hstring>() };
    configMap.Insert(L"appVersion", L"1.0.0");
    configMap.Insert(L"deploymentKey", L"<app deployment key>");
    winrt::Microsoft::CodePush::ReactNative::CodePushConfig::Init(configMap);
//...
}
//...

Plugin Installation and Configuration for React Native lower than 0.60 (Windows)

Plugin Installation (Windows)

Open the Visual Studio solution located at windows-legacy\<AppName>\<AppName>.sln within your app
Right-click the solution node in the Solution Explorer window and select the Add -> Existing Project... menu item
Browse to the node_modules\react-native-code-push\windows directory, select the file, and click OK
Back in the Solution Explorer, right-click the project node that's named after your app, and select the Add -> Reference... menu item
Select the Projects tab on the left-hand side, check the CodePush item, and then click OK

Plugin Configuration (Windows)

After installing the plugin, you need to configure your app to check CodePush for the location of your JS bundle, since it will "take control" of managing the current and all future versions. To do this, update the AppReactPage.cs file to use CodePush via the following changes:

...
// 1. Import the CodePush namespace
using CodePush.ReactNative;
...
class AppReactPage : ReactPage
{
    // 2. Declare a private instance variable for the CodePushModule instance.
    private CodePushReactPackage codePushReactPackage;

    // 3. Update the JavaScriptBundleFile property to initialize the CodePush runtime,
    // specifying the right deployment key, then use it to return the bundle URL from
    // CodePush instead of statically from the binary. If you don't already have your
    // deployment key, you can run "appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys" to retrieve it.
    public override string JavaScriptBundleFile
    {
        get
        {
            codePushReactPackage = new CodePushReactPackage("deployment-key-here", this);
            return codePushReactPackage.GetJavaScriptBundleFile();
        }
    }

    // 4. Add the codePushReactPackage instance to the list of existing packages.
    public override List<IReactPackage> Packages
    {
        get
        {
            return new List<IReactPackage>
            {
                new MainReactPackage(),
                ...
                codePushReactPackage
            };
        }
    }
    ...
}

Share via

Get Started with the React Native Client SDK

iOS Setup

Plugin Installation and Configuration for React Native 0.60 version and above (iOS)

Plugin Installation for React Native lower than 0.60 (iOS)

Plugin Installation (iOS - RNPM)

Plugin Installation (iOS - CocoaPods)

Plugin Installation (iOS - Manual)

Plugin Configuration for React Native lower than 0.60 (iOS)

HTTP exception domains configuration (iOS)

Code Signing setup (iOS)

Android Setup

Plugin Installation (Android)

Plugin Installation and Configuration for React Native 0.60 version and above (Android)

Plugin Installation for React Native lower than 0.60 (Android)

Plugin Installation (Android - RNPM)

Plugin Installation (Android - Manual)

Plugin Configuration for React Native lower than 0.60 (Android)

Background React Instances

Code Signing setup (Android)

For React Native <= v0.60 you should configure the `CodePush` instance to use this parameter using one of the following approaches

Using constructor

Using builder

Windows Setup

Plugin Installation and Configuration for React Native version 0.63.6 and above (Windows)

Plugin Installation (Windows-npx)

Plugin Configuration (Windows)

Plugin Installation and Configuration for React Native lower than 0.60 (Windows)

Plugin Installation (Windows)

Plugin Configuration (Windows)

Feedback

Additional resources

Share via

Get Started with the React Native Client SDK

iOS Setup

Plugin Installation and Configuration for React Native 0.60 version and above (iOS)

Plugin Installation for React Native lower than 0.60 (iOS)

Plugin Installation (iOS - RNPM)

Plugin Installation (iOS - CocoaPods)

Plugin Installation (iOS - Manual)

Plugin Configuration for React Native lower than 0.60 (iOS)

HTTP exception domains configuration (iOS)

Code Signing setup (iOS)

Android Setup

Plugin Installation (Android)

Plugin Installation and Configuration for React Native 0.60 version and above (Android)

Plugin Installation for React Native lower than 0.60 (Android)

Plugin Installation (Android - RNPM)

Plugin Installation (Android - Manual)

Plugin Configuration for React Native lower than 0.60 (Android)

Background React Instances

Code Signing setup (Android)

For React Native <= v0.60 you should configure the CodePush instance to use this parameter using one of the following approaches

Using constructor

Using builder

Windows Setup

Plugin Installation and Configuration for React Native version 0.63.6 and above (Windows)

Plugin Installation (Windows-npx)

Plugin Configuration (Windows)

Plugin Installation and Configuration for React Native lower than 0.60 (Windows)

Plugin Installation (Windows)

Plugin Configuration (Windows)

Feedback

Additional resources

For React Native <= v0.60 you should configure the `CodePush` instance to use this parameter using one of the following approaches