Rork のサブスクを RevenueCat の Entitlement で組む — アクセス判定・Offering 駆動のペイウォール・復元の実装メモ

// src/services/offerings.ts
import Purchases, { PurchasesPackage } from 'react-native-purchases';
 
export async function getCurrentPackages(): Promise<PurchasesPackage[]> {
  const offerings = await Purchases.getOfferings();
  // current は RevenueCat ダッシュボードで「現在出す Offering」に設定したもの
  return offerings.current?.availablePackages ?? [];
}
 
export async function purchase(pkg: PurchasesPackage) {
  try {
    const { customerInfo } = await Purchases.purchasePackage(pkg);
    return { ok: true as const, customerInfo };
  } catch (e: any) {
    // ユーザーが課金シートを閉じただけの「キャンセル」は失敗ではない。
    // ここをエラー扱いするとキャンセルのたびに赤いトーストが出て体験が悪い
    if (e.userCancelled) return { ok: false as const, cancelled: true };
    return { ok: false as const, error: e };
  }
}

// src/components/Paywall.tsx
import { useEffect, useState } from 'react';
import { View, Text, Pressable, ActivityIndicator } from 'react-native';
import { PurchasesPackage } from 'react-native-purchases';
import { getCurrentPackages, purchase } from '../services/offerings';
 
export function Paywall({ onPurchased }: { onPurchased: () => void }) {
  const [packages, setPackages] = useState<PurchasesPackage[] | null>(null);
  const [busy, setBusy] = useState(false);
 
  useEffect(() => {
    getCurrentPackages().then(setPackages).catch(() => setPackages([]));
  }, []);
 
  if (!packages) return <ActivityIndicator />;
  if (packages.length === 0) {
    // 取得ゼロは「設定漏れ」のサイン。サンドボックスでは商品が
    // 「承認待ち」だと空配列になりがちなので、無言で消さず案内を出す
    return <Text>現在ご利用いただけるプランがありません。時間をおいてお試しください。</Text>;
  }
 
  async function onTap(pkg: PurchasesPackage) {
    setBusy(true);
    const res = await purchase(pkg);
    setBusy(false);
    if (res.ok) onPurchased();
  }
 
  return (
    <View>
      {packages.map((pkg) => (
        <Pressable key={pkg.identifier} disabled={busy} onPress={() => onTap(pkg)}>
          <Text>{pkg.product.title}</Text>
          {/* 価格は priceString をそのまま使う。自前整形しない */}
          <Text>{pkg.product.priceString}</Text>
        </Pressable>
      ))}
    </View>
  );
}

// src/providers/EntitlementProvider.tsx
import { createContext, useContext, useEffect, useState } from 'react';
import Purchases, { CustomerInfo } from 'react-native-purchases';
import { isPro, getCustomerInfo } from '../services/purchases';
 
const Ctx = createContext<{ pro: boolean; ready: boolean }>({ pro: false, ready: false });
 
export function EntitlementProvider({ children }: { children: React.ReactNode }) {
  const [pro, setPro] = useState(false);
  const [ready, setReady] = useState(false);
 
  useEffect(() => {
    let mounted = true;
    const apply = (info: CustomerInfo) => mounted && setPro(isPro(info));
 
    // 起動時に一度取得し、以後は更新を購読する。
    // purchasePackage や restorePurchases の戻り値で setPro するより、
    // この一本に集約したほうが「どこで状態が変わるか」を見失わない
    getCustomerInfo().then((info) => { apply(info); setReady(true); }).catch(() => setReady(true));
    Purchases.addCustomerInfoUpdateListener(apply);
    return () => { mounted = false; Purchases.removeCustomerInfoUpdateListener(apply); };
  }, []);
 
  return <Ctx.Provider value={{ pro, ready }}>{children}</Ctx.Provider>;
}
 
export const useEntitlement = () => useContext(Ctx);

// src/services/purchases.ts（続き）
export async function restore(): Promise<boolean> {
  const info = await Purchases.restorePurchases();
  return isPro(info);
}

async function onRestore() {
  const restored = await restore();
  Alert.alert(restored ? '購入を復元しました' : '復元できる購入が見つかりませんでした');
}