Ionic React App Rate

Trigger the native app rate popup component in your Ionic React project.

Install The Cordova Plugin

We will be using the app-rate cordova plugin to trigger the native app-rate component. Use the following commands to install the app-rate cordova plugin.

npm install cordova-plugin-apprate

npm install @awesome-cordova-plugins/app-rate

ionic cap sync

App Rate Code

We can use the following appRate function to trigger the native app-rate component.

import {
  AppRate,
  AppRateReviewTypeAndroid,
  AppRateReviewTypeIos
} from '@awesome-cordova-plugins/app-rate';


export const appRate = () => {
  AppRate.setPreferences({
    usesUntilPrompt: 5,
    simpleMode: true,
    showPromptForInAppReview: false,
    reviewType: {
      ios: AppRateReviewTypeIos.InAppReview,
      android: AppRateReviewTypeAndroid.InAppReview
    },
    storeAppURL: {
	  ios: 'bundle-id',
	  android: 'market://details?id=android-id',
    }
  });

  AppRate.promptForRating(false);
};

🛠️ Configs

• usesUntilPrompt: 5 means that we wait till the app is opened five times before triggering the prompt.
• simpleMode and showPromptForInAppReview are configs which deals with the type of component, I suggest you try all the options by changing the values of these configs and choose the values best fit for your use case.
• use the AppRate.promptForRating function with true param if you want to immediately trigger the native app rate modal. A use case would be triggering the modal on clicking a custom button in your app.

Trigger App Rate

In react you can either use one of the following methods to trigger the native app rate component. You can add this to the app.tsx file.

// Functional component using hooks
function App() {

  useEffect(() => {
    appRate();
  }, []);

  return (
    ...
  );
}

OR

// For class based components
export default class App extends Component {

  async componentDidMount() {
    appRate();
  }

  render() {
    ...
  }
}

That’s all folks, happy hacking 🙌