When launching a new application, it’s important to keep our users up to date and using the latest app version. In today’s tutorial that is exactly what we’ll be going through, and you’ll be ecstatic to know that it’s actually not that difficult.

We’ll be using kimxogus react-native-version-check package to achieve this functionality.

Let’s get started…

First thing in your terminal run the following command to use my template to get your project started.

npx react-native init {YOUR_APP_NAME} --template https://github.com/daboigbae/react-native-template

Replace {YOUR_APP_NAME} with the name you’d like to give your project

Step 1: Install react-native-version-check

We’ll be using react-native-version-check library to check the version of our application. This library gets the latest app version by parsing google play store, apple app store app information or from a custom api url.

• Using yarn: yarn add react-native-version-check
• Using NPM: npm install react-native-version-check

After installing the library we’ll need to run pod install in our ios directory.

Step 2: Build Version Update Modal Screen

The First thing we’ll be doing after installing everything necessary for our project is building out our update modal screen. This screen will be used to display a message to our users that their app is out of date and in need of an update.

We will also need a button to redirect them to either the app store or play store (depending on the platform) to get their update.

Remember this is a test… so we will not be able to redirect to the app store. We will only be mocking up our data to mimic this functionality

Path to file: src/screens/UpdateNeededScreen.js

Step 3: Navigation Updates

The next thing we’ll need to do is update our navigation component to include our UpdateNeededScreen. Since this will be a modal screen we will need to add modal configuration in our options prop.

Path to file: src/navigation/Navigation.js

Step 4: Landing Screen Updates

Next, we’ll be making some updates to our landing screen. In this screen we’ll need to check our app version. If the current version of the app doesn’t match the latest version we’ll be redirecting them to our UpdateNeededScreen. If versions match then our users will be successfully redirected to our home screen.

We’ll be using react-native-version-check to do these checks. Like mentioned above, since this is a test application we’ll need to hardcode our logic for version check.

• needUpdate(): This function will help us check if our users’ application needs an update. We will need to send a currentVersion, and a latestVersion parameter.
• getCurrentVersion(): This function will return our app’s current version. Since this a test application this will return version 1.0 by default.
• getLatestVersion() — not for testing: This function would help us get the latest app version from the app/play store. Since this is a test application this won’t actually return us any information. Once the application is successfully launched this function will return us the latest version from the app/play store.

And that’s it! Now we can check for the app’s version, and prompt or redirect our users to upgrade their application when not up to date. Remember once you have launched your application to the app/play store you can redirect them to the actual update 👍