How to Add an App Force Update Popup in React Native?

How to Add an App Force Update Popup in React Native

Keeping your application up to date goes a long way in ensuring that users get the latest features, security updates, and performance improvements. An update popup in React Native might be the best way to let users update their app when a new version is available to. This tutorial will teach you how to implement this step by step.

Why Add a Force Update Popup?

  • Critical Updates: To always have the latest bug fixes and security patches.
  • Feature Rollouts: Give direct access to new features or improvements.
  • API Changes: Ensure compatibility with updated APIs or services.
  • Compliance: To adhere to various regulatory or policy requirements.

We’ll be using the react-native-version-check library to check on the version of our application. This library gets the latest app version by parsing Google Play Store, and Apple App Store app information or from a custom API URL. 

How to Add an App Force Update Popup in React Native?

Install the package using npm or yarn:

Using npm:

npm i react-native-version-check

Using yarn:

yarn add react-native-version-check

Android Setup

Step 1: Add the following lines to android/settings.gradle

include ‘:react-native-version-check’

project(‘:react-native-version-check’).projectDir = new File(rootProject.projectDir,

‘../node_modules/react-native-version-check/android’)

Step 2: Insert the following lines inside the dependencies block in android/app/build.gradle

dependencies {

   …

   compile project(‘:react-native-version-check’)

}

Step 3: Open up android/app/src/main/java/[…]/MainApplication.java

……

import io.xogus.reactnative.versioncheck.RNVersionCheckPackage;  // <— HERE

……

@Override

protected List<ReactPackage> getPackages() {

   ……

   new RNVersionCheckPackage()            // <—— HERE

   ……

}

iOS Set up

Step 1: Add to your Podfile (assuming it’s in ios/Podfile):

pod ‘react-native-version-check’, :path =>’../node_modules/react-native-version-check’

Step 2: Reinstall pod with cd ios && pod install && cd ..

Example :

import React, { useEffect } from ‘react’;

import { Linking, Platform, Alert,Platform } from ‘react-native’;

import VersionCheck from ‘react-native-version-check’;

const App = () => {

  useEffect(() => {

    const checkAppVersion = async () => {

    let latestVersion = “”;

    try {

      if (Platform.OS === ‘android’) {

        const res = await fetch(

           `https://play.google.com/store/apps/details?id=com.yourapp.package&hl=en`,

        );

        const text = await res.text();

        const match = text.match(/\[\[\[“([\d.]+?)”\]\]/);

        if (match) {

          latestVersion = match[1].trim();

        }

      } else {

        let resVersion = await fetch(`https://itunes.apple.com/in/lookup?bundleId=

                                     com.yourapp.package`)

          .then(r => r.json())

          .then((res) => { return res?.results[0]?.version });

        latestVersion = resVersion

      }

      const currentVersion = VersionCheck.getCurrentVersion();

      console.log(currentVersion, “<= Compare version =>”, latestVersion)

      if (latestVersion > currentVersion) {

        Alert.alert(

          ‘Update Required’,

          ‘A new version of the app is available. Please update to continue using the app.’,

          [

            {

              text: ‘Update Now’,

              onPress: () => {

                Linking.openURL(

                  Platform.OS === ‘ios’

                    ? “url= app store app url”

                    : “url= play store app url”

                );

              },

            },

          ],

          { cancelable: false }

        );

      }

    } catch (error) {

      console.error(‘Error checking app version:’, error);

    }

  }

 checkAppVersion()

  }, []);

};

export default App;

Output:

Conclusion:

Putting a force update popup in React Native offers better UX by confirming that all users run the updated version of the app. You can also easily implement this feature into your app with the steps given above, bringing your users’ experience up to par. 

Happy Coding!

Previous Article

How to Implement App Bridge Model API Instead of Deprecated Shopify Model Component in Shopify Remix App?

Next Article

Magento 2: How to Override Template using Helper Function

Write a Comment

Leave a Comment

Your email address will not be published. Required fields are marked *

Get Connect With Us

Subscribe to our email newsletter to get the latest posts delivered right to your email.
Pure inspiration, zero spam ✨