In App Update with React Native

Implementing Android In App Updates in React Native

Hey guys, In this article, I want to discuss how to implement in app updates in react-native project.

It is just a new way of updating apps, managed by google play. Whenever there is a new update for your app.

In App Updates feature shows Popup or Screen asking your users to update app depending upon your urgency requirements.

In-App Update

Popup screen for updating the app

So, here i am writing all the steps to achieve this feature in your app.

Currently, there is no library available for in-app update with react-native, So we have to code in java and then integrate these with our native modules.

Step 1: First Create a react-native project or open an existing project. Now open the android folder of the project using Android studio.

And Check the app is working fine or not. If the app works fine then do this exactly

add these two lines

• implementation 'com.google.android.material:material:1.1.0' and
• implementation 'com.google.android.play:core:1.7.3'at the end of dependencies section of the build.gradle(app) file. As shown below

android > app > build.gradle

Step 2: Now create two files named as InAppUpdateModule.java & InAppUpdatePackage.java in the same directory of MainActivity.java (android/app/src/main/java/com/your-app-name/).

You can also get these files from my github link.

These are the two files

1. InAppUpdateModule.java :

Update your app package name in the 1st line.

2. InAppUpdatePackage.java

Update your app package name in the 1st line.

Step 3. After creation of these 2 files with above code ,open MainApplication.java and add it as a package in getPackages method like below.

Update this code in your MainApplication.java file

Step 4: Now click sync option in Android studio .

After the successful syncing, you should be able to access this module in JavaScript, so create a file named as InAppUpdate.js in your react native project and paste the following code.

InAppUpdate.js

Now you should be able to use the CheckUpdate method in JavaScript. Import InAppUpdate file and use it wherever you want. Here is how you call the checkUpdate method.

You can use this anywhere in your project.

That’s it !! We have implemented “in-app update ”feature successfully.

Now you can build and test your app.

For any Queries,

Here’s my github link:

import-yuv/react-native-inapp-update

Here You can get the above files easily and i have shared some testing process for your app.

Please let me know if you face any issue or problem.

Thank You