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

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

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

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

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);
});
};

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);

});

};

onMessageReceived = async (event, webView) => {
var messageObject = JSON.parse(event.nativeEvent.data);

switch (messageObject['action']) {
.
.
.
case 'addreview':
this.addReview();
break;
}
}

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,

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

if(window.isRNWebView!==undefined && window.isRNWebView){

let data = {};

data.action = "addreview";

window.ReactNativeWebView.postMessage(JSON.stringify(data));

}

Updated on Feb 21, 2022