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

このガイドは Expo プロジェクト を対象としています。 純粋な React Native(non-Expo) を使用している場合は、純粋な React Native のフォールバックガイド を参照してください。

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

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

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

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

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

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

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

完全な動作サンプルは 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 が使われます。各プラットフォームに対応するファイルを指定してください。

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

    npx expo prebuild

    plugin は 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/
  4. 実行時に SDK へファイルを登録します:

    import { adapty } from 'react-native-adapty';
    
    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 に含まれていないことを確認してください。