How to ask Android users for reviews before they exit an app

Ratings and Reviews define the quality of your app and help it gain a larger user pool. App with good ratings are preferred over apps with poor ratings; so, ratings are essential for an app to gain a huge user base. However, before you ask for a review, the quality of your app should be great.

When to ask for a review?

Surveys have shown that most Android users use the back button at the bottom of the mobile device to exit the app. Here, we are going to implement the app rating modal inside the app so that users can add the review of their choice when exiting the app. The review modal will take them to the Google app store with a specific app on the interface.

This article is specifically for the Android platform and its users – iOS devices do not provide a back button.

Let’s get started!

First, we need to set up a new react-native project. Let’s dive into the feature implementation.

BackButton Event handler

React Native offers a default BackHandler component from its core package that is react-native.

You can also check out the documentation about it.

First, we need to import the BackHandler component as shown in the code snippet below:

import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar, **BackHandler**, Button, Linking
} from 'react-native';

In order to initialize the event handler, we will be using the useEffect hook. We are going to initialize the addEventListener and removeEventListerner for the BackHandler component inside the useEffect function, as shown in the code snippet below:

React.useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', handleBackButton);
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', handleBackButton);
    }
  }, [])

Next, we need to create a handleBackButton function to handle the showing of our Review Modal. Here, we are going to setModalVisible to true as directed in the code snippet below:

const handleBackButton = () => {
    setModalVisible(true)
    return true;
  };

Setting up Modal

For the Modal view, we are going to use the react native modal package. This package makes modal configuration and handling very simple. In order to install this package, we need to run one of the following commands. The commands differ depending on your package installer:

npm i react-native-modal 

or

yarn add react-native-modal

Next, we need to import the Modal component from the package as shown in the code snippet below:

import Modal from 'react-native-modal';

Then, we need to create a state to handle Modal using the useState hook, as shown in the code snippet below:

const App = () => {
  const [isModalVisible, setModalVisible] = React.useState(false);

Here, the visibility of Modal is initially set to false.

Now, we need to add the Modal component to our main view. Here, we are going to create an interface that will ask the user for a review. For the exit button, we need to call the exit function from react-native Backhandler, as shown in the code snippet below:

<Modal isVisible={isModalVisible}>
            <View>
              <Text>Please Review App before exit</Text>
              <Button title="Nope" onPress={() => BackHandler.exitApp()} />
            </View>
          </Modal>

Setting up star ratings

What we want is to open the play store when the user clicks on the star ratings. For that, we need to make use of a react-native-star-rating package. The installation process is pretty simple. However, we also require a react-native-vector-icons package in order for it to work. So, it is recommended that you set up the vector icons package before setting up the star ratings package. You can easily follow the installation guide from their respective documentations.

Now, we need to install react-native-star-rating package and its dependencies by running the following commands:

npm install react-native-star-rating --save

or

yarn add react-native-star-rating

We also need to install react-native-vector-icons. For that, you can refer to the react-native-vector-icons installation guide.

Now, in order to use these packages, we first need to import them, as directed in the code snippet below:

import StarRating from 'react-native-star-rating';

Then, we need to use it in the Modal body, as highlighted in the code snippet below:

<Modal isVisible={isModalVisible}>
            <View>
              <Text>Please Review App before exit</Text>
              **<StarRating
                disabled={false}
                maxStars={5}
                rating={4}
                selectedStar={(rating) => openPlayStore()}
              />**
              <Button title="Nope" onPress={() => BackHandler.exitApp()} />
            </View>
          </Modal>

Now, in order to open the play store, we need to make use of the Linking component. Linking component provides the openURL method that enables us to open the link of an app in the play store itself. You can use the code from the following code snippet and edit the URL accordingly:

const openPlayStore = () => {
    return Linking.openURL(`market://details?id=com.kriss`).catch(err =>
      alert('Please check for the Google Play Store')
    );
  }

Hence, we will get the result as displayed in the demo below:

Here, we can notice that clicking on stars navigates us to the play store page. We have now successfully implemented the Review Modal and can ask the users for their review while they are exiting the app.

Stay tuned for more interesting tutorials.

Until then, good day folks!