DEV Community

Cover image for CodePush with ReactNative for Android.
Raghad
Raghad

Posted on

CodePush with ReactNative for Android.

What is CodePush?

CodePush is an App Center cloud service that enables React Native developers to deploy mobile app updates directly to their users without going through store approvals. With codepush, you can update javascript code by fixing bugs and applying new styles and new feature.

Note that stores Apple and Google will let you apply the changes in case you are not changing the whole app and not changing any native Android IOS code only javascript code.

In this post will cover

  1. Creating an account in AppCenter and a RN project.
  2. Integrating codepush with react native.
  3. Building a sample app and deploy the changes to AppCenter CodePush.

First lets understand how codepush is working with the image below.

CodePush

If you have any changes a normal way is to upload them to stores and once stores approve the application then you can download the app but what if you got a crash bug and you need immediately to update the app CodePush can help you here. What code push is doing is will check if any Javascript code changes the Javascript bundle if there is AppCenter will automatically apply the changes.

Creating an account in AppCenter.

Click here to register to AppCenter once done a you will see the below page click on Add new in the right top corner then Add new app.

new app appcenter

Select the Name of your App, Release Type, OS and Platform then click on Add new app.

you will get something like this lets go now and and create a RN app.

Getting Started

Setup React Native Project.

npx react-native@latest init AwesomeProject
cd AwesomeProject
Enter fullscreen mode Exit fullscreen mode

Add AppCenter CLI and SDK to the project.

npm install -g appcenter-cli
npm install appcenter appcenter-analytics appcenter-crashes --save-exact
Enter fullscreen mode Exit fullscreen mode

Create a new file with the name appcenter-config.json in android/app/src/main/assets/ with the following content:

{
  "app_secret": "{Your app secret here}"
}
Enter fullscreen mode Exit fullscreen mode

if you do not have the assets folder you can create one

Modify the app's res/values/strings.xml to include the following lines:

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
Enter fullscreen mode Exit fullscreen mode

Add CodePush

npm install --save react-native-code-push
Enter fullscreen mode Exit fullscreen mode

After installing all dependencies run this command

npm run android
Enter fullscreen mode Exit fullscreen mode

Plugin integration

Plugin installation and configuration is different based on your react native version, so perform the following setup steps depending on your react native version.

React native versions

Next Wrap your component with CodePush in App.js , there are many options to wrap with your component

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

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

MyApp = CodePush(MyApp);

Enter fullscreen mode Exit fullscreen mode

Now we are done with integration part you can change the default react native app code styles to what ever you want, once you are satisfied you can build the release version of your app.

To release an APK check this

The release build will take time as we did many native code changes.

Once the release done go to android\app\build\outputs\apk\release
and install it in your Android phone.

Now lets update our JavaScript code change it to what ever you want, once you are satisfied lets release an update but now without releasing a new APK but a new update to AppCenter.

Release an update with the command

appcenter codepush release-react -a ownername/projectname ** -d **environment

The ownername is the owner name in AppCenter, projectname ** is the project name in AppCenter, environment either **staging **or **production base on your deployment key.

If you are not getting the update:

  • Make sure you applied all required changes for CodePush dependencies.
  • Make sure the keys are correct, and you deploy production/staging correctly.

I hope you enjoyed :)

Top comments (1)

Collapse
 
maxfindel profile image
Max F. Findel

I have been through the insufferable process of app validation and I can only recommend any tool that helps you skip this arbitrary and error-prone process. Thanks for this! πŸ™Œ