SoFunction
Updated on 2025-03-08

React Native implements hot updates and automatic signature packaging function

Project background: Android App for manual link

1. Download react-native-code-push

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

2. Added in android/file:

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

3. In android\app\src\main\java\com\app\Modify in the file

...
// 1. Import the plugin class.
import ;
 
public class MainApplication extends Application implements ReactApplication {
 
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    ...
 
    // 2. Override the getJSBundleFile method in order to let
    // the CodePush runtime determine where to get the JS
    // bundle location from on each app start
    @Override
    protected String getJSBundleFile() {
      return ();
    }
  // Where manual link needs to be modified, automatic link should not be modified.      @Override
  protected List<ReactPackage> getPackages() {
   @SuppressWarnings("UnnecessaryLocalVariable")
   List<ReactPackage> packages = new PackageList(this).getPackages();
   // Packages that cannot be autolinked yet can be added manually here, for
   // example:
   // (new MyReactNativePackage());
   (new CodePush(getResources().getString(),
     getApplicationContext(), ,
     getResources().getString(.reactNativeCodePush_androidServerURL)));
   return packages;
  }
  };
}
 
//CodePushDeploymentKey corresponding to the name of the Deployment key in//reactNativeCodePush_androidServerURLCorresponding to the hot update service address insidename

Modification: First, add your app to the push center and get the key of the environment branch you need

4.1. Log in to the hot update server

4.2. Push Center Creation Project: (For the first deployment)

code-push app add project name android react-native

4.3 Add environment branch dev: code-push deployment add project name dev (for the first deployment)

To package the project to the corresponding environment branch, you need to configure the key and hot update addresses of the environment branch to the project file: ()

4.4 The preparation work has been done, let’s modify the file now

...
apply from: "../../node_modules/react-native/"
apply from: "../../node_modules/react-native-code-push/android/"
...
 
dependencies {
  implementation project(':react-native-code-push') //It is best to add it manually, otherwise there may be pitfalls  implementation fileTree(dir: "libs", include: ["*.jar"])
  ....
}
....

5. Modify android/app/file

 STACK TRACE AND/OR SCREENSHOTS
 
:app:compileDebugJavaWithJavac - is not incremental (. outputs have changed, no previous execution, etc.).
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\:6: error: package  does not exist
import ;
                  ^
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\:23: error: cannot find symbol
    return ();
        ^
 symbol: variable CodePush
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\:35: error: cannot find symbol
      new CodePush(null, getApplicationContext(), ),
        ^
 symbol: class CodePush
3 errors
:app:compileDebugJavaWithJavac FAILED
 
FAILURE: Build failed with an exception.
 
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

Caitou: react-native-code-push needs to be added manually, otherwise an error will be reported:

  STACK TRACE AND/OR SCREENSHOTS
 
:app:compileDebugJavaWithJavac - is not incremental (. outputs have changed, no previous execution, etc.).
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\:6: error: package does not exist
import ;
                                   ^
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\:23: error: cannot find symbol
        return ();
               ^
  symbol: variable CodePush
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\:35: error: cannot find symbol
            new CodePush(null, getApplicationContext(), ),
                ^
  symbol: class CodePush
3 errors
:app:compileDebugJavaWithJavac FAILED
 
FAILURE: Build failed with an exception.
 
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

6. Chuangpit: Manually link react-native-code-push app, autolink needs to be disabled, otherwise an error will be reported:

: Native module CodePush tried to override CodePushNativeModule. Check the getPackages() method in , it might be that module is being created twice. If this was your intention, set canOverrideExistingModule=true

So you need to add a configuration file to prohibit automatic linking

Create a file in the project root directory

 = {
  dependencies: {
    'react-native-code-push': {
      platforms: {
        android: null, // disable Android platform, other platforms will still autolink
      },
    },
  },
};

7. The hot update configuration is completed. Now we need to detect the hot update when the project is started and prompt

In the project entry file:

import React,{ Component } from 'react';
import Root from './src/inner';
import configureStore from './src/inner/store';
import UpdateDialog from './src/common/components/updateDialog'
import CodePush from "react-native-code-push";
 
const { persistor, store } = configureStore();
 
 
class App extends Component {
 
 state = {
 
  visitDialog: false,
  current: 0,
  total: 100
 }
 
 
 
 componentDidMount() {
  ({
   //Installation mode   //ON_NEXT_RESUME Next time you restore to the foreground   //ON_NEXT_RESTART The next time you restart   //IMMEDIATE Update now   installMode: ,
   //Dialogue   updateDialog: {
    // Whether to display the update description    appendReleaseDescription: true,
    //Update the prefix of the description.  Default is "Description"    descriptionPrefix: "Update content:",
    //Forced update button text, default is continue    mandatoryContinueButtonLabel: "Update now",
    //Information during forced update. The default is "An update is available that must be installed."    mandatoryUpdateMessage: "It must be updated to use",
    //When the button text is not forced to update, the default is "ignore"    optionalIgnoreButtonLabel: 'Later',
    //Confirm button text when not forced to update. Default is "Install"    optionalInstallButtonLabel: 'Background update',
    //When not forced update, the updated message text is checked    optionalUpdateMessage: 'There is a new version, is it updated?  ',
    //Title of Alert window    title: 'Update prompt'
   },
  },
   (status) => {
    (status, 'status')
    if (status == 7) {
     ({ visitDialog: true })
    }
   },
   (progress) => {
    let receivedBytes =  / 1024 / 1024;
    let totalBytes =  / 1024 / 1024;
    ({
     current: receivedBytes,
     total: totalBytes
    })
    if (receivedBytes === totalBytes) {
     setTimeout(() => {
      ({ visitDialog: false })
     }, 1000)
    }
    (progress, 'progress')
   }
  );
 }
 
 render() {
  (, 'visitDialog');
  return (
   <>
    <Root store={store} persistor={persistor} />
    { && <UpdateDialog
     title={ ===  ? 'Completed' : 'Downloading update file'}
     describe={ ===  ? 'Welcome' : 'Please wait'}
     current={} total={}></UpdateDialog>}
   </>
  )
 }
};
 
let codePushOptions = {
 //Set the frequency of checking updates //ON_APP_RESUME APP is restored to the foreground //ON_APP_START When the APP is turned on //MANUAL Manual inspection checkFrequency: .ON_APP_START
};
 
export default CodePush(codePushOptions)(App);

UpdateDialog: It is a component of the hot update download progress bar that I encapsulated myself. The download prompt can be written casually according to my own mood. I will not post my own code here! (I'm sorry to write)

Now we have hot update configuration, and package the official apk!

1. Generate a signature file: Run the command in the project root directory:

keytool -genkey -v -keystore My signature - -keyalg RSA -keysize 2048 -validity 10000 -alias My signature

2. Copy the generated signature file to the directory: android/app directory

3. Configuration

=true
=true
MYAPP_RELEASE_STORE_FILE= //The generated signature keyMYAPP_RELEASE_KEY_ALIAS=ydh //AliasMYAPP_RELEASE_STORE_PASSWORD=Password set when signing
MYAPP_RELEASE_KEY_PASSWORD=Password set when signing

4. Modify android/app/

  signingConfigs {
    debug {
      ...
    }
 
    release {
      if (('MYAPP_RELEASE_STORE_FILE')) {
        storeFile file(MYAPP_RELEASE_STORE_FILE)
        storePassword MYAPP_RELEASE_STORE_PASSWORD
        keyAlias MYAPP_RELEASE_KEY_ALIAS
        keyPassword MYAPP_RELEASE_KEY_PASSWORD
      }
    }
  }

5..Packaging (under the Android directory): .\ assembleRelease

The app is successfully packaged, copy the apk to your mobile phone to install

6..Push code: (When it needs to be updated, push the code to the environment branch you want to update)

Push to the dev environment: code-push release-react Project name android -d dev

Push to the production environment:-m true means force update, no addition means no force update

code-push release-react project name android -d Production -m true

Then restart the app and you will see the update prompt

Summarize

This is the end of this article about React Native implementing hot updates and automatically signing and packaging. For more related React Native signature packaging content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!