How to add In App Review in your application

• Before starting to your developement, please read following articles for better understanding
• https://developer.android.com/guide/playcore/in-app-review
• https://github.com/MinaSamir11/react-native-in-app-review#troubleshooting
• React native skeleton – https://github.com/WPoets/react-native-skeleton

Prerequisites:

• Upgrade node js, yarn, npm, npx to their latest version
• install react-native CLI if is not there
  • npm install –global react-native-cli

Run following command on your console:

• XHTML

  yarn add react-native-in-app-review

  1	yarn add react-native-in-app-review

• XHTML

  react-native link react-native-in-app-review

  1	react-native link react-native-in-app-review

to link the react-native-in-app-review library.

Changes in react native repository:

• Note : this will be already added to react-native-skelton, please download it from link section at the top.
• android/settings.gradle
  
  XHTML

  include ':react-native-in-app-review' project(':react-native-in-app-review').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-in-app-review/android')

  1 2	include ':react-native-in-app-review' project(':react-native-in-app-review').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-in-app-review/android')

• android/app/build.gradle
  
  XHTML

  dependencies { implementation project(':react-native-in-app-review') }

  1 2 3

  dependencies { implementation project(':react-native-in-app-review') }

• android/app/src/main/java/your/package/MainApplication.java
  
  XHTML

  import com.ibits.react_native_in_app_review.AppReviewPackage;

  1	import com.ibits.react_native_in_app_review.AppReviewPackage;

• android/App.js
  
  XHTML

  import InAppReview from "react-native-in-app-review";

  1	import InAppReview from "react-native-in-app-review";

  
  
  XHTML

  addReview = async () => { InAppReview.isAvailable(); InAppReview.RequestInAppReview() .then((hasFlowFinishedSuccessfully) => { // when return true in android it means user finished or close review flow console.log('InAppReview in android', hasFlowFinishedSuccessfully); //Alert.alert('InAppReview in android'); if (hasFlowFinishedSuccessfully) { //Alert.alert('hasFlowFinishedSuccessfully'); } }) .catch((error) => { console.log(error); }); };

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  addReview = async () => { InAppReview.isAvailable(); InAppReview.RequestInAppReview() .then((hasFlowFinishedSuccessfully) => {   // when return true in android it means user finished or close review flow console.log('InAppReview in android', hasFlowFinishedSuccessfully); //Alert.alert('InAppReview in android');   if (hasFlowFinishedSuccessfully) { //Alert.alert('hasFlowFinishedSuccessfully'); } }) .catch((error) => { console.log(error); }); };

  
  
  XHTML

  onMessageReceived = async (event, webView) => { var messageObject = JSON.parse(event.nativeEvent.data); switch (messageObject['action']) { . . . case 'addreview': this.addReview(); break; } }

  1 2 3 4 5 6 7 8 9 10 11 12

  onMessageReceived = async (event, webView) => { var messageObject = JSON.parse(event.nativeEvent.data);   switch (messageObject['action']) { . . . case 'addreview': this.addReview(); break; } }

Changes In web view:

• now when ever you want to trigger the in-app review popup to user you can use,
• XHTML

  if(window.isRNWebView!==undefined && window.isRNWebView){ let data = {}; data.action = "addreview"; window.ReactNativeWebView.postMessage(JSON.stringify(data)); }

  1 2 3 4 5

  if(window.isRNWebView!==undefined && window.isRNWebView){ let data = {}; data.action = "addreview"; window.ReactNativeWebView.postMessage(JSON.stringify(data)); }