Ratings Indicator

Asks the user to rate the app in the iOS App Store or Google Play store directly from within the app.

Installation

Before copy/pasting, add the following dependencies to your project:

Usage

index.tsx
import * as React from 'react';
import { View } from 'react-native';
import * as StoreReview from 'expo-store-review';

import { Text } from '~/components/nativewindui/Text';

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="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