How to give force update alert to the user when a new version is uploaded to Google play or play store in React Native
Hi all. This is the first article that I’m writing to Medium. So if there any mistakes or any suggestions please let me know :-). Currently, I’m developing an app using React Native. There was a client requirement to give app users an alert if there is a new version available in Google play or play store. Let’s say if someone using my app and if there is any update available in store then there should be an alert that shows update available.
In this case, I have googled again and again in but I didn’t find a better solution for this. But last I have achieved this by using a couple of react-native external libraries and a small piece of code.
1. react-native-appstore-version-checker
By using react-native-appstore-version-checker you can return the latest version of an app in the store. react-native-device-info used for return application build number or version number. Finally, react-native-app-link used to navigate Google play or app store. For more info about these libraries, you can use the above links. Now let’s get started to implement this function by using react-native.
Before starting this tutorial I’m assuming you have a basic idea of react-native and javascript. Ok, let’s get started.
First, move to your app folder in your project and install the above libraries by using npm or yarn. In my app I’m using react-native 0.59.8 and react 16.6.3.
After it’s done go to your landing page (any page that you need to display alert). If you want to display alert only one time when comes to that page then you can use the componentDidMount() method. Or if alert msg should display whenever comes to the page you can use willFocus() method. I will use the componentDidMount() for calling function. Change your file changes as follow.
I will explain what I have done here.
I have import installed libraries first. When componentDidMount() triggered it calls to method checkVersionUpdate(). In that method first I have used the getAppstoreAppVersion() method from react-native-appstore-version-checker. From that method, we can return the current app version of the store. For now, I have used Whatsapp ios app id and android package id. But you have to use your current app ids here. After that inside, if condition for ios I have used DeviceInfo.getBuildNumber() and for the android DeviceInfo.getVersion(). methods from react-native-device-info.
Note: You can use even DeviceInfo.getVersion() for the ios.
When submitting to review I match my version with the current build number. So in my code inside, if the condition is not satisfied then it will open a modal.
Ok now in the android platform when we upload new apk to the console each time we need to increase the versionCode by int value. VersionName is the value display to the user.
Once you upload your new version apps into the Google Play and play store in your home page it will give a modal because of version mismatch. For creating this modal I have used the react-native-moalbox library.
When the user clicks the button it will navigate to Google play or play store. This is gonna handle by the react-native-app-link library. You just need to pass the app name, package id, and app id. Finally, you can update your app without manually navigate to the store. Sounds good right?
So if there any mistakes or suggestions please comment below. Happy coding for all !!!!!!!!!
