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.

One of the options: https://appcenter.ms/?utm_source=CodePush&utm_medium=Azure if want push changes but not for updates of native modules. — Oleg, Oct 27 '19 at 17:15
@Oleg if I don't wont to use this? Can I make some invisible screen contain a message for upcoming updates and button to navigate hem play store and just appeared it based on something Field in the database let say bool if true visibility a screen else hide it what you think ? — DevAS, Oct 27 '19 at 17:45
You can check it in background at navigating to screen or componentwillmount or make global timer that check what do you want and open intent for link to play store like https://stackoverflow.com/questions/40262036/react-native-how-to-open-google-play-store-from-react-native-app — Oleg, Oct 27 '19 at 17:59

score 6 · Answer 1 · answered Oct 28 '19 at 12:24

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);

   }

}

This library is now deprecated, instead use https://github.com/kimxogus/react-native-version-check — Abhishek Sharma, Jul 03 '22 at 03:32

score 2 · Answer 2 · answered Feb 18 '21 at 11:58

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}`);
  });
 };

answered Feb 18 '21 at 11:58

Syed Amir Ali

873
12
22

I am using https://github.com/kimxogus/react-native-version-check for the verison check but its not working its returning me undefined: VersionCheck.needUpdate().then(res => { if (res.isNeeded) { setTimeout(() => { this.setState({openModal: true}); }); } }); – Birender Pathania May 29 '21 at 09:27
version check doesn't work on Emulators you need to check this on physical device @BirenderPathania – Syed Amir Ali May 31 '21 at 10:05
@SyedAmirAli I am testing on a real device. It is giving me `[TypeError: Invalid Version: 1.03.0]` error – Rahul Khurana Sep 09 '21 at 06:42
i am also facing same issue anyone can you please help. – BHAVIK Nov 16 '22 at 15:20

score 1 · Answer 3 · answered Mar 09 '21 at 01:25

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.

score 0 · Answer 4 · answered Feb 18 '21 at 06:56

0

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

answered Feb 18 '21 at 06:56

Hp Sharma

309
3
7

1

Mine crashes after build but works well in development. Did you experience same? – Nate Mar 14 '21 at 05:43
No, I did not face this issue. – Hp Sharma Mar 14 '21 at 08:20
@Nathileo If you are on expo, it crashes when building if accidentally imported it as 'react-native-version-check' instead of 'react-native-version-check-expo' – Bayram May 11 '22 at 15:59

How to force users to update the app using react native

4 Answers4

Linked