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!
