ExpoプロジェクトでフォールバックペイウォールをExpoプロジェクトで使用する

このガイドは Expo プロジェクトに適用されます。 **純粋な React Native(Expo を使用しない場合)**を使用している場合は、純粋な React Native のフォールバックペイウォールガイドをご覧ください。

スムーズなユーザー体験を維持するために、フロー、ペイウォールオンボーディングフォールバックを設定することが重要です。この対策により、インターネット接続が部分的または完全に失われた場合でも、アプリケーションの機能を維持できます。

  • アプリケーションが Adapty サーバーにアクセスできない場合:

    フォールバックのフローまたはペイウォールを表示し、ローカルのオンボーディング設定にアクセスできます。

  • アプリケーションがインターネットにアクセスできない場合:

    フォールバックのフローまたはペイウォールを表示できます。オンボーディングはリモートコンテンツを含むため、動作にはインターネット接続が必要です。

このガイドの手順を進める前に、Adapty からフォールバック設定ファイルをダウンロードしてください。

Adapty SDK はフォールバックファイルをネイティブバンドルから読み込みます。iOS の場合は .app パッケージ内のリソース、Android の場合は android/app/src/main/assets/ 配下のエントリです。Expo プロジェクトでは、npx expo prebuild --clean を実行するたびにこれらのディレクトリが再生成されるため、ファイルを手動で配置することはできません。react-native-adapty の設定プラグインが、ファイルをネイティブバンドルに自動的に組み込んでくれます。

FocusJournalExpo サンプルアプリで、完全な動作環境のセットアップを確認できます。

設定

  1. フォールバック JSON ファイルをプロジェクト内の任意の場所に配置します。通常は他のアセットと同じ場所に置きます:

    <your-project>/
    └── assets/
        ├── ios_fallback.json
        └── android_fallback.json
  2. app.json(または app.config.js)の react-native-adapty エントリに fallbackFile オプションを追加します。各プラットフォームキーは任意です。必要なプラットフォームのみ設定してください:

   {
     "expo": {
       "plugins": [
         [
           "react-native-adapty",
           {
             "fallbackFile": {
               "ios": "./assets/ios_fallback.json",
               "android": "./assets/android_fallback.json"
             }
           }
         ]
       ]
     }
   }

Adapty はプラットフォームごとに異なるフォールバック JSON をエクスポートします — iOS では Apple のプロダクト ID、Android では Google Play のプロダクト ID が使用されます。各プラットフォームに対応するファイルを指定してください。

  1. ネイティブプロジェクトを再生成します:
   npx expo prebuild

プラグインは iOS ファイルを Xcode プロジェクトのバンドルリソースに追加し、Android ファイルを android/app/src/main/assets/ にコピーします。prebuild の出力には次のような行が含まれます:

[react-native-adapty] Registered ios_fallback.json as iOS bundle resource
[react-native-adapty] Copied android_fallback.json to android assets/
  1. 実行時に SDK へファイルを登録します:

await adapty.activate('PUBLIC_SDK_KEY');

await adapty.setFallback({
  ios: { fileName: 'ios_fallback.json' },
  android: { relativeAssetPath: 'android_fallback.json' },
});

setFallback に渡すファイル名は、fallbackFile で設定したファイルのベース名と一致している必要があります。

setFallback は、SDK が対象のフロー、ペイウォール、またはオンボーディングを取得する前に実行する必要があります。

確認

npx expo prebuild 実行後、両方のプラットフォームを確認してください:

  • Android: android/app/src/main/assets/ の内容を一覧表示します。fallbackFile.android で設定したファイルが存在し、iOS 専用のファイル名が含まれていないことを確認してください。
  • iOS: ios/<ProjectName>.xcodeproj/project.pbxproj で iOS のファイル名を検索します。PBXFileReferenceResources グループ、PBXResourcesBuildPhase に表示されているはずです。Android 専用のファイル名が project.pbxproj に含まれていないことを確認してください。