How to implement Android playstore in-app update with react-native

Question

How can I implement play store in-app update with my react-native app, which is already live on play store?

I have already implemented code push and also internal version check via API calls to force the user to update the app.

With Codepush: code push only works for javascript changes. However, there are many scenarios where we will need the whole app to be updated when there is a native code change.

With API check: We need to watch when the update is getting live, and update the version number kept in the backend to force the user to update the app.

Though both these solutions are kind of patchy, I would like to implement the elegant approach of the play-store in-app update, but couldn't find a clue on how to get it done.

Answer 1

I did not find any react-native package for this, so I had to implement it for my self.

You can check the complete tutorial here and below downloadable files here.

But in short, here is what you need to do.

1. Open android folder in your react-native project with Android Studio and add implementation 'com.google.android.play:core:1.7.3' at the end of dependencies section of the build.gradle(app) file. Like below,

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    //noinspection GradleDynamicVersion
    implementation "com.facebook.react:react-native:+"  // From node_modules


    .......
    implementation 'com.google.android.play:core:1.7.3' // add it at the end
}

Cick sync after adding the dependency.

2. Download InAppUpdateModule.java and InAppUpdatePackage.java files and place in them in the same directory of MainActivity.java(android/app/src/main/java/<package>/)
3. Change the package names in both InAppUpdateModule.java and InAppUpdatePackage.java to your project package name.
4. Now Open MainApplication.java and add our InAppUpdatePackage into getPackages method like below,

        @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:
           //  packages.add(new MyReactNativePackage());
            packages.add(new InAppUpdatePackage());
          return packages;
        }

5. Download InAppUpdate.js and place it into your react-native project.
6. Import the InAppUpdate.js in any js file, wherever you want to use. And use it like below.

  componentDidMount () {
    InAppUpdate.checkUpdate() // this is how you check for update 
  }

7. That's it.

You can download all the files from here

Answer 2

There's a fairly new package that does that: sp-react-native-in-app-updates.

It also handles the iOS case by prompting the user with a native alert that redirects to the App Store.

Answer 3

One more option (Better than the APi check): Check the latest version from play store and act accordingly, with https://github.com/kimxogus/react-native-version-check

VersionCheck.needUpdate()
  .then(async res => {
    console.log(res.isNeeded);    // true
    if (res.isNeeded) {
      Linking.openURL(await VersionCheck.getStoreUrl());  // open store if update is needed.
    }
  });

Answer 4

You can use sp-react-native-in-app-updates library for inapp update.

npm i sp-react-native-in-app-updates

This is a react-native native module that works on both iOS and Android, and checks the stores (play/app) for a new version of your app and can prompt your user for an update.

It uses embedded in-app-updates via Play-Core on Android (to check & download google play patches natively from within the app), and react-native-siren on iOS (to check & navigate the user to the AppStore).