Adding CodePush SDK to your React Native app

DeployPulse uses the CodePush client to deliver updates to your React Native app. Please check the documentation for all details in regards to compatibility and installation.

NOTE: If you are utilizing the new React Native architecture introduced by default in 0.76, please use newer client found here.

Install the CodePush client

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

iOS Setup

The setup for iOS can be followed from the official CodePush documentation here.

Android Setup

The setup for Android can be followed from the official CodePush documentation here.

Configure environment

Update your app to point to the DeployPulse server and use CodePushDeploymentKey generated from your DeployPulse account For your iOS app you will need to update the Info.plist file with the following

	<key>CodePushDeploymentKey</key>
	<string>{{DEPLOYMENT_KEY_HERE}}</string>
	<key>CodePushServerURL</key>
    <string>https://apps.deploypulse.io/</string>

For your Android app you will need to update the strings.xml file with the following

 <resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">{{DEPLOYMENT_KEY_HERE}}</string>
     <string moduleConfig="true" name="CodePushServerUrl">https://apps.deploypulse.io/</string>
 </resources>

Usage

There are many ways to use CodePush in your app. The most common way is to wrap your root component with the codePush higher order component.

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

class MyApp extends Component {
}

MyApp = codePush(MyApp);

Additional Plugin Usage

With the CodePush plugin downloaded and linked, and your app asking CodePush where to get the right JS bundle from, the only thing left is to add the necessary code to your app to control the following policies:

  1. When (and how often) to check for an update? (for example app start, in response to clicking a button in a settings page, periodically at some fixed interval)

  2. When an update is available, how to present it to the end user?

The simplest way to do this is to "CodePush-ify" your app's root component. To do so, you can choose one of the following two options:

  • Option 1: Wrap your root component with the codePush higher-order component:

    • For class component

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

class MyApp extends Component {
}

MyApp = codePush(MyApp);

    • For functional component

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

let MyApp: () => React$Node = () => {
}

MyApp = codePush(MyApp);

  • Option 2: Use the ES7 decorator syntax:

    NOTE: Decorators are not yet supported in Babel 6.x pending proposal update. You may need to enable it by installing and using babel-preset-react-native-stage-0.

    • For class component

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

@codePush
class MyApp extends Component {
}

    • For functional component

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

const MyApp: () => React$Node = () => {
}

export default codePush(MyApp);

By default, CodePush will check for updates on every app start. If an update is available, it will be silently downloaded, and installed the next time the app is restarted (either explicitly by the end user or by the OS), which ensures the least invasive experience for your end users. If an available update is mandatory, then it will be installed immediately, ensuring that the end user gets it as soon as possible.

If you would like your app to discover updates more quickly, you can also choose to sync up with the CodePush server every time the app resumes from the background.

  • For class component

    let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };

class MyApp extends Component {
}

MyApp = codePush(codePushOptions)(MyApp);

  • For functional component

    let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };

let MyApp: () => React$Node = () => {
}

MyApp = codePush(codePushOptions)(MyApp);

Alternatively, if you want fine-grained control over when the check happens (like a button press or timer interval), you can call CodePush.sync() at any time with your desired SyncOptions, and optionally turn off CodePush's automatic checking by specifying a manual checkFrequency:

let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };

class MyApp extends Component {
    onButtonPress() {
        codePush.sync({
            updateDialog: true,
            installMode: codePush.InstallMode.IMMEDIATE
        });
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={this.onButtonPress}>
                    <Text>Check for updates</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

MyApp = codePush(codePushOptions)(MyApp);