React Native and CodePush Example

Installation

Simply CD into your project's root folder and run these commands.

# Install Code Push CLI globally
npm install -g code-push-cli

# Create a Code Push Account
code-push register

# Register your app with CodePush
code-push app add MyApp

# Install CodePush module
npm install --save react-native-code-push@latest

# Install RNPM
npm install -g rnpm

# Link the CodePush module with your iOS and Android projects
rnpm link react-native-code-push  

iOS Setup & Configuration

Setup

  1. Open your app’s Xcode project
  2. Select the project node in Xcode and select the “Build Phases” tab of your project configuration.
  3. Click the plus sign underneath the “Link Binary With Libraries” list and select the libz.tbd library underneath the iOS node that matches your target version.

Xcode Screenshot

Configuration

Once your Xcode project has been setup to build/link the CodePush plugin, you need to configure your app to consult CodePush for the location of your JS bundle, since it is responsible for synchronizing it with updates that are released to the CodePush server. To do this, perform the following steps:

  • Open up the ios/AppName/AppDelegate.m file, import "CodePush.h" and replace the current jsCodeLocation line with the if else block below.
#import "CodePush.h"

NSURL *jsCodeLocation;

#ifdef DEBUG
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
  jsCodeLocation = [CodePush bundleURL];
#endif
  • Find your CodePush Staging Deployment Key by running the command below
code-push deployment ls <AppName> -k  
  • After that open ios/AppName/Info.plist and add a new key:value pair near the end of the file. The key should always be "CodePushDeploymentKey" and the value should be <string>Your Staging Deployment Key</string>.
  ...
  <key>CodePushDeploymentKey</key>
  <string>d41d8cd98f00b204e9800998ecf8427e</string>
</dict>  
</plist>  

Android Setup & Configuration

# Suh dude! Coming soon.

Usage

Simply import and call codePush.sync() in your root components componentDidMount method This will check for updates every time your app runs. However you can be creative with where you place codePush.sync() and check for updates as often or as little as you want.

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

export default class App extends React.Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    codePush.sync();
  }

}

Updating Your App

Now you can update your apps in the wild

As long as you have only changed the JavaScript or other assets such as images then you can push those updates to all your users with the command below.

# Structure of the command
code-push release-react <appName> <platform>

# Push updates for an example iOS app
code-push release-react ExampleApp ios

# Push updates for an example Android app
code-push release-react ExampleApp android  

Check out the CodePush CLI docs to learn more about managing your CodePush enabled applications.

References

A set of UI components for React Native.
Get Carbon Native!