Mega Bundle Sale is ON! Get ALL of our React Native codebases at 95% OFF discount 🔥

Get Bundle

React Native boasts impressive features such as live and hot reloading. Nevertheless, mobile developers often wish to directly send updates to users in a production environment, making the process quicker and more streamlined compared to updating through the Google Play Store or iOS App Store.

This tutorial will guide you through the use of react-native-code-push, a React Native module for CodePush, which allows you to deploy updates to your users directly. You will receive step-by-step guidance to get started and will be shown a comprehensive demonstration. Before we dive into the tutorial, let’s first understand what CodePush is and the advantages it offers.

At Instamobile, we make use of this amazing infrastructure to manage our clients’ apps on the app stores seamlessly, by also leveraging our functional React Native templates.

What are Over-the-air Updates? (OTA)

Over-the-air (OTA) updates refer to the delivery of software updates to mobile devices, such as smartphones and tablets, wirelessly, without the need for a physical connection. This eliminates the need for users to connect their device to a computer and manually download and install updates. Instead, updates are pushed to the device automatically through the internet and can be installed with just a few taps or clicks.

OTA updates are convenient for both users and developers. For users, they ensure that their devices are always running the latest software with the latest bug fixes and security patches. For developers, they provide an efficient and cost-effective way to roll out updates to a large number of users, without requiring them to physically connect their devices to a computer.

Overall, OTA updates are an important aspect of mobile software development and can greatly improve the user experience and security of mobile devices.

What is CodePush?

CodePush is a cloud service that allows developers to deploy updates directly to their users’ devices without having to go through the traditional app store review process. It works by providing a cloud repository where developers can store updates to their apps, which are then automatically pushed to users’ devices over the air (OTA).

CodePush supports both iOS and Android platforms and can be easily integrated into React Native apps using a plugin called react-native-code-push. The service provides a simple and efficient way to deploy bug fixes, feature updates, and other changes directly to users, without requiring them to manually download and install updates from an app store.

By using CodePush, developers can reduce the time and effort required to release updates and provide a better user experience for their app’s users. Additionally, because CodePush updates are deployed over the air, they can be delivered to users immediately, without the need for a physical connection. This makes it an essential tool for any React Native app looking to streamline its development process and provide a more seamless user experience.

Setting up CodePush

To get started with CodePush, you will need to create a Microsoft Account and sign in to the CodePush Dashboard. From there, you can create a new application and get the necessary keys to integrate CodePush into your React Native app.

Creating a Deployment in CodePush

A deployment in CodePush is a specific version of your app that you can target with updates. To create a deployment, go to the CodePush Dashboard, select your app, and click the “New Deployment” button. You can then choose the deployment name, choose the platform you are targeting, and select the code to be deployed.

Integrating CodePush in React Native

Now that you have created a deployment in CodePush, you can integrate it into your React Native app.

iOS Setup

Install the CodePush CLI and the CodePush React Native plugin:

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

Link the native modules in your React Native app:

react-native link react-native-code-push

Add the CodePush key to the AppDelegate.m file:

#import "CodePush.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [CodePush configureWithAppKey:@"YOUR_APP_KEY"];
  ...
}

Android Setup

Install the CodePush React Native plugin:

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

Link the native modules in your React Native app:

react-native link react-native-code-push

Update the MainApplication.java file:

import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {
  ...
  @Override
  protected List getPackages() {
    ...
    packages.add(new CodePush("YOUR_APP_KEY", getApplicationContext(), BuildConfig.DEBUG));
    ...
    return packages;
  }
  ...
}

Initializing CodePush in React Native

Once CodePush has been integrated into your app, you can initialize it in your React Native component.

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

class App extends React.Component {
  ...
}

export default codePush({ checkFrequency: codePush.CheckFrequency.ON_APP_START })(App);

Deploying over-the-air Updates with CodePush & AppCenter

CodePush can be integrated with AppCenter to make it easier to manage your app releases and deployments. To deploy an update over-the-air, you can use the code-push release-react command.

code-push release-react  
  --entryFile 
  --sourcemapOutput 
  --bundleName 
  [--description ]
  [--development | --staging | --production]
  [--rollout ]
 

For example, to release an update for a React Native app on the iOS platform with a 50% rollout, you can run the following command:

code-push release-react MyApp-iOS ios
  --entryFile index.ios.js
  --sourcemapOutput sourcemap.map
  --bundleName main.jsbundle
  --description "My new update"
  --staging
  --rollout 50

With this integration, you can easily deploy updates to your users without having to go through the traditional app store review process.

Conclusion

In conclusion, integrating CodePush into your React Native app provides numerous benefits for both developers and end-users. It allows for quick and efficient updates to be deployed directly to users without going through the traditional app store review process. By using CodePush in conjunction with AppCenter, you can easily manage app releases and deployments, making it an essential tool for any React Native app.

This tutorial has provided step-by-step instructions on how to set up CodePush, integrate it into your React Native app, and deploy over-the-air updates. Whether you are a beginner or an experienced developer, incorporating CodePush into your workflow can streamline your development process and provide a better user experience for your app’s users.