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