Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

Over The Air Updates in React-Native

Published by: Noc Folio3 | February 9, 2021
SCROLL AND BE AMAZED!
Home > React Native > Over The Air Updates in React-Native

Deploying a new build is always a hassle and time-consuming task. Consider a scenario QA reports a bug and all you need to do to fix the bug is just add a single line. However, you need to go through a complete build process which takes about forty minutes even if you have Fastlane configured.

The problem becomes worst when the application is in production, and a bug is encountered. Then you do not only have to go through the complete build process and upload a new build on Play Store and App Store but also wait for at least a day till the app is reviewed and is live and then the users will have to download the updated version.

To address all the above-mentioned issues and to make deploying part easier, a service called Code Push comes to help. It is a cloud service from Microsoft Visual Studio App Center, that acts as a central repository where developers can publish certain updates.

Setting up Code-Push

To start with Code Push you need to create an account on Visual Studio App Center.

Along with Code Push, Visual Studio App Center brings together multiple common services into a DevOps cloud solution. Developers use App Center to Build, Test, and Distribute applications. Once the app’s deployed, developers monitor the status and usage of the app using the Analytics and Diagnostics services.

Create an app

When you add a new app in App Center, you need to create a new app for each platform, one app for Android, one app for iOS. After you have created an app, in a sidebar, go to Distribute > Code Push, there you will have a list of all Code Push releases you have created along with the release type – Production or Staging.

Setting up Client SDKs

You manage most of CodePush’s functionality using the App Center CLI. To install the CLI, open a terminal window or command prompt and execute the following command:

npm install -g appcenter-cli

Execute the following command for Code-Pushify your current react-native app.

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

After installing the NPM package, you need to install the native module, so follow the iOS setup and Android setup.

For React Native versions above 0.60

iOS:

In AppDelegate.m file:

  1. #import <CodePush/CodePush.h>
  2. Find:
    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  3. Replace it with:
      return [CodePush bundleURL];

This is how sourceURLForBridge method should look like

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}

4- Add Code push deployment key in Info.plist from Distribute > Code Push and go to settings to find the key of the release type.

<key>CodePushDeploymentKey</key>
<string>$(CODEPUSH_KEY)</string>

ANDROID:

1- In android/settings.gradle add the following lines at the end of the file:

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

2- In your android/app/build.gradle file, add the codepush.gradle file as an additional build task definition underneath react.gradle:

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

3- Update MainApplication.java:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

4- Add Deployment Key in strings.xml:

<resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>

Using Code-Push plugin: 

Wrap your root component with the CodePush higher-order component:

import codePush from 'react-native-code-push';
let App = () => {
 . . .
}
 
App = codePush(App);
export default App;

Releasing updates:
Add the following scripts in package.json

"code-push-ios": "appcenter codepush release-react -a <ownerName>/MyApp-iOS -d Staging",
"code-push-android": "appcenter codepush release-react -a <ownerName>/MyApp-Android -d Staging"

Execute npm run code-push-ios and npm run code-push-android to updated react native app over the app.

Once these steps are complete, all users running your app will receive the update. Moreover, release updates will be visible in the CodePush dashboard. You can go to a specific build and turn on the required-update to make sure that the new code is installed as soon as it’s downloaded from the server or else it will be installed and will be visible the next time app is opened.

Conclusion:

Code-Push is a powerful tool that helps in seamless deployments and both, Google Play Store and App Store permit using it. Even though this is an “abstract” way to apply updates across devices, Android does not have a specific guideline for this, but Apple does. You can find more info in the Store guideline compliance.


About Noc Folio3

Newsletter

Search

Archives

  • December 2023
  • April 2023
  • March 2023
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • October 2021
  • September 2021
  • May 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019

Recent Posts

  • Exploring Flutter Navigation: From Basics to Advanced Routes
  • Web UI Test Automation with Pytest-BDD
  • How to fix IOS compass calibration issues
  • Testing Android Applications With Perfect Coverage
  • How to use useRef hook efficiently? – React

Tags

  • android
  • angular-state-management
  • Automation
  • Compass
  • cross-platform
  • css
  • development
  • firebase
  • hooks
  • ios
  • learn-ngrx
  • ngrx-beginner
  • ngrx/store
  • QA
  • react-native
  • reactjs
  • scss
  • stylesheet
  • styling
  • Testing
  • Test Script
  • UI-UX

Newsletter

Newsletter

Post navigation

Previous WHAT IS A STARTUP ACCELERATOR AND HOW DOES IT WORK FOR A STARTUP APP DEVELOPMENT COMPANY?
Next Top 5 C# Programming Techniques
Schedule an Appointment with our Mobile App Development Expert
Footer Menu
  • Company
    • About Us
    • Portfolio
    • Blog
    • Careers
    • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise App Development
    • AR/VR Application Development
    • IoT Application Development
    • Wearables Apps Development
    • Field Sales
    • On-Demand Apps Development
  • Technologies
    • iOS
    • Android
    • React Native
    • Flutter
    • Ionic
    • Xamarin
    • NativeScript
    • HTML5
    • Sencha
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical
    • Manufacturing
    • Automotive
    • Logistics
    • Education

US Office

Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

Tel: +1 408 365 4638
Support: +1 (408) 512 1812

Mexico Office

Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

Bulgaria Office

49 Bacho Kiro Street, Sofia, 1000, Bulgaria

Canada Office​

895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

UK Office

Export House, Cawsey Way, Woking Surrey, GU21 6QX

Tel: +44 (0) 14 8361 6611

UAE Office

Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

Tel: +971-55-6540154
Tel: +971-04-2505173

Pakistan Office

Folio3 Tower, Plot 26, Block B, SMCH Society, Main Shahrah-e-Faisal, Karachi.

First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore.

Tel: +92-21-3432 3721-4 

© 2025, Folio3 Software Inc., All rights reserved.

  • Privacy policy and terms of use
  • Cookie Policy
Follow us on
Facebook-f Linkedin-in Instagram

Get a free app audit

[contact-form-7 id="3548" title="Float Banner Form"]