2 Minutes Read
By @akash_dathan
By @akash_dathan
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
andshowPromptForInAppReview
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 withtrue
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 (
...
);
}
// For class based components
export default class App extends Component {
async componentDidMount() {
appRate();
}
render() {
...
}
}
That’s all folks, happy hacking 🙌