How to force users to update the app using react native

Question

I have updated my app on app and play store and I want to force my app users to update the new version of app in App store and playstore.

Answer 1

You can check for the App Store / Play Store version of your app by using this library react-native-appstore-version-checker.

In expo app you can get the current bundle version using Constants.nativeAppVersion. docs.

Now in your root react native component, you can add an event listener to detect app state change. Every time the app transitions from background to foreground, you can run your logic to determine the current version and the latest version and prompt the user to update the app.

 import { AppState } from 'react-native';


 class Root extends Component {

   componentDidMount() {
     AppState.addEventListener('change', this._handleAppStateChange);
   }



   _handleAppStateChange = (nextState) => {
     if (nextState === 'active') {

        /**
                Add code to check for the remote app version.
                Compare it with the local version. If they differ, i.e.,
                (remote version) !== (local version), then you can show a screen,
                with some UI asking for the user to update. (You can probably show
                a button, which on press takes the user directly to the store)
         */


     }
    }



   componentWillUnmount() {
      AppState.removeEventListener('change', this._handleAppStateChange);

   }

}

Answer 2

import VersionCheck from 'react-native-version-check';

i have used version check lib for this purpose and approach i used is below. if version is lower i'm opening a modal on which an update button appears, and that button redirects to app store/google play

  componentDidMount() {
this.checkAppUpdate();
}


  checkAppUpdate() {
VersionCheck.needUpdate().then(res => {
  if (res.isNeeded) {
    setTimeout(() => {
      this.setState({openModal: true});
    });
  }
});
}

  updateApp = () => {
VersionCheck.getStoreUrl({
  appID: 'com.showassist.showassist',
  appName,
})
  .then(url => {
    Linking.canOpenURL(url)
      .then(supported => {
        if (!supported) {
        } else {
          return Linking.openURL(url);
        }
      })
      .catch(err => console.error('An error occurred', err));
  })
  .catch(err => {
    console.log(`error is: ${err}`);
  });
 };

Answer 3

For future readers.

If you are using Expo managed workflow, install this package react-native-version-check-expo using yarn add react-native-version-check-expo or npm install react-native-version-check-expo.

Consult the package documentation on Github for usage guidelines.

Answer 4

I'm using react-native-version-check-expo library to achieve this. Working fine for me.

Answer 5

if you are looking for an easy to integrate built in solution. You can use https://appupgrade.dev/ service to force update you mobile apps. You need to create new version for your app versions you want to update in the app upgrade service and select whether you want to force it or just want to let users know that new version is available.

after this you will need to call the appupgrade api from your app with the required details such as your app version, platform, environment and app name. The API will return you the details.. that this app needs to be updated or not. Based on the response you can show popup in your app.You can call this API when app starts or periodically to check for the update. You can even provide a custom message. API response:

See the response has force update true. So handle in the app by showing popup.

You can find the complete user documentation here. https://appupgrade.dev/docs

Thanks.