Skip to main content

React Native SDK Setup

This guide will help you integrate the Source Push SDK into your React Native application.

Installation​

Install the Source Push SDK using npm:

npm install --save @srcpush/react-native-code-push

Or using yarn:

yarn add @srcpush/react-native-code-push

Platform Setup​

iOS Setup​

  1. Add the SDK to your Podfile:

    pod 'CodePush', :path => '../node_modules/@srcpush/react-native-code-push'

  2. Install pods:

    cd ios && pod install

  3. Add Source Push configuration to Info.plist:

    <key>CodePushDeploymentKey</key>
    <string>Your-Deployment-Key</string>
    <key>CodePushServerURL</key>
    <string>https://api.srcpush.com</string>

Android Setup​

  1. Configure your Android project:

  2. Update android/settings.gradle:

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

  3. Update android/app/build.gradle:

    apply from: "../../node_modules/@srcpush/react-native-code-push/android/codepush.gradle"

  4. Add Source Push configuration to strings.xml:

    <string moduleConfig="true" name="CodePushDeploymentKey">Your-Deployment-Key</string>
    <string moduleConfig="true" name="CodePushServerUrl">https://api.srcpush.com</string>

JavaScript Implementation​

Basic Integration​

Wrap your root component with the CodePush HOC:

import codePush from "@srcpush/react-native-code-push";

const App = () => {
  return (
    <View>
      <Text>Your App Content</Text>
    </View>
  );
};

export default codePush(App);

Advanced Configuration​

Configure update behavior with options:

const codePushOptions = {
  checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
  installMode: codePush.InstallMode.ON_NEXT_RESTART,
};

const App = () => {
  return (
    <View>
      <Text>Your App Content</Text>
    </View>
  );
};

export default codePush(codePushOptions)(App);

Manual Update Checking​

Implement manual update checks:

const checkForUpdate = async () => {
  try {
    const update = await codePush.checkForUpdate();
    if (update) {
      await codePush.sync({
        updateDialog: true,
        installMode: codePush.InstallMode.IMMEDIATE,
      });
    }
  } catch (error) {
    console.error("Error checking for update:", error);
  }
};

Update Lifecycle​

The SDK provides several events you can listen to:

codePush.sync(
  {
    updateDialog: true,
    installMode: codePush.InstallMode.IMMEDIATE,
    mandatoryInstallMode: codePush.InstallMode.IMMEDIATE,
    rollbackRetryOptions: {
      maxRetryAttempts: 3,
    },
  },
  (status) => {
    switch (status) {
      case codePush.SyncStatus.CHECKING_FOR_UPDATE:
        console.log("Checking for updates...");
        break;
      case codePush.SyncStatus.DOWNLOADING_PACKAGE:
        console.log("Downloading package...");
        break;
      case codePush.SyncStatus.INSTALLING_UPDATE:
        console.log("Installing update...");
        break;
      case codePush.SyncStatus.UP_TO_DATE:
        console.log("App up to date.");
        break;
      case codePush.SyncStatus.UPDATE_INSTALLED:
        console.log("Update installed.");
        break;
    }
  },
);

Best Practices​

  1. Error Handling:

    try {
      await codePush.sync();
    } catch (error) {
      // Handle or report the error
      console.error("Sync error:", error);
    }

  2. Version Targeting:

    codePush.sync({
      deploymentKey: "YOUR-DEPLOYMENT-KEY",
      targetBinaryVersion: "1.0.0",
    });

  3. Staged Rollouts:

    // In your release command
    srcpush release-react MyApp ios --rollout 25

Next Steps​