Ratings Indicator
Asks the user to rate the app in the iOS App Store or Google Play store directly from within the app.
Installation
1
Run the following command:
npx nwui-cli@latest add ratings-indicator
馃殌
1
Add the following dependencies to your project:
npx expo install expo-store-review
馃殺
Usage
index.tsx
import * as StoreReview from 'expo-store-review';
import * as React from 'react';
import { View, Text } from 'react-native';
let hasRequestedReview = false;
function RatingsIndicatorExample() {
React.useEffect(() => {
async function showRequestReview() {
if (hasRequestedReview) return;
try {
if (await StoreReview.hasAction()) {
await StoreReview.requestReview();
}
} catch (error) {
console.log(
'FOR ANDROID: Make sure you meet all conditions to be able to test and use it: https://developer.android.com/guide/playcore/in-app-review/test#troubleshooting',
error
);
} finally {
hasRequestedReview = true;
}
}
const timeout = setTimeout(() => {
showRequestReview();
}, 1000);
return () => clearTimeout(timeout);
}, []);
return (
<View className="gap-3">
<Text className="text-foreground pb-2 text-center font-semibold">Please follow the guidelines.</Text>
<View className="flex-row">
<Text className="w-6 text-center text-muted-foreground">路</Text>
<View className="flex-1">
<Text variant="caption1" className="text-muted-foreground">
Don't call StoreReview.requestReview() from a button
</Text>
</View>
</View>
<View className="flex-row">
<Text className="w-6 text-center text-muted-foreground">路</Text>
<View className="flex-1">
<Text variant="caption1" className="text-muted-foreground">
Don't request a review when the user is doing something time sensitive.
</Text>
</View>
</View>
<View className="flex-row">
<Text className="w-6 text-center text-muted-foreground">路</Text>
<View className="flex-1">
<Text variant="caption1" className="text-muted-foreground">
Don't ask the user any questions before or while presenting the rating button or
card.
</Text>
</View>
</View>
</View>
);
}
漏 Ronin Technologies LLC 2024