expo-store-reviewでレビューを依頼する

Expo + React Native でストアレビューを依頼します。基本的には以下の記事の続きです。

今回は以下の機能を実装します。

  • zustandで状態を保存する
  • 一定回数何らかのアクションが行わたタイミングでレビューを依頼する

ライブラリのインストール

expo-store-review をインストールします。

npx expo install expo-store-review expo-linking

レビュー依頼のトリガーとなる状態を保存する Store を作る

askReviewToriggerStore.ts
import { type StateCreator } from 'zustand/esm';
import { create } from 'zustand';
import { createJSONStorage, persist } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

export interface AskReviewTriggerStore {
  triggerCount: number;
  addTriggerCount: (count: number) => void;
}

export const createAskReviewTriggerStore: StateCreator<AskReviewTriggerStore> = (set) => ({
  triggerCount: 0,
  addTriggerCount: (count) => {
    set((state) => ({ triggerCount: state.triggerCount + count }));
  },
});

export const useAskReviewTriggerStore = create(
  persist(createAskReviewTriggerStore, {
    name: 'ask-review-trigger-storage',
    storage: createJSONStorage(() => AsyncStorage),
  })
);

レビューを依頼するカスタムフックを作る

useStoreReview.ts
import { useAskReviewTriggerStore } from '@/lib/store/askReviewToriggerStore';
import * as StoreReview from 'expo-store-review';

const REVIEW_INTERVAL = 5;

export const useStoreReview = () => {
  const { triggerCount } = useAskReviewTriggerStore();

  const requestReview = async () => {
    try {
      const isReviewAvailable = await StoreReview.isAvailableAsync();
      if (!isReviewAvailable) return;

      if (triggerCount !== 0 && triggerCount % REVIEW_INTERVAL === 0) {
        await StoreReview.requestReview();
      }
    } catch (error) {
      console.log(error);
    }
  };

  return { requestReview };
};

レビューを依頼するカスタムフックを使う

以下のようにすれば、「5回保存を実行したユーザー」にレビュー依頼を出すことができます。

HTML
const onSave = () => {
    addTriggerCount(1);
    requestReview()
      .then(() => {
        console.log('レビューを依頼しました。');
      })
      .catch((error) => {
        console.error(error);
      });
  };
}

トリガのカウントとなるイベントを適切に選べば、より熱意のあるユーザーに対してレビュー依頼を出すことができます。