Utiliser les paywalls de secours dans un projet Expo

Important

Ce guide s’applique aux projets Expo. Si vous utilisez React Native pur (sans Expo), suivez plutôt le guide des paywalls de secours pour React Native pur.

Pour maintenir une expérience utilisateur fluide, il est important de configurer des fallbacks pour vos flows, paywalls et onboardings. Cette précaution étend les capacités de l’application en cas de perte partielle ou totale de la connexion internet.

Si l’application ne peut pas accéder aux serveurs Adapty :

Elle pourra afficher un flow ou un paywall de secours, et accéder à la configuration locale de l’onboarding.
Si l’application ne peut pas accéder à internet :

Elle pourra afficher un flow ou un paywall de secours. Les onboardings incluent du contenu distant et nécessitent une connexion internet pour fonctionner.

Important

Avant de suivre les étapes de ce guide, téléchargez les fichiers de configuration de secours depuis Adapty.

Le SDK Adapty lit le fichier de secours depuis le bundle natif — une ressource iOS dans le package .app, ou une entrée sous android/app/src/main/assets/. Dans un projet Expo, npx expo prebuild --clean régénère ces répertoires à chaque exécution, il est donc impossible d’y déposer les fichiers manuellement. Le plugin de configuration react-native-adapty se charge de connecter le fichier au bundle natif pour vous.

Tip

Un exemple complet et fonctionnel est disponible dans l’application d’exemple FocusJournalExpo.

Configuration

Placez les fichiers JSON de secours n’importe où dans votre projet — généralement à côté des autres assets :
```
<your-project>/
└── assets/
    ├── ios_fallback.json
    └── android_fallback.json
```
Ajoutez l’option fallbackFile à l’entrée react-native-adapty dans app.json (ou app.config.js). Chaque clé de plateforme est facultative — ne configurez que les plateformes dont vous avez besoin :

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

Note

Adapty exporte un fichier JSON de secours différent pour chaque plateforme — les identifiants de produits Apple sur iOS, les identifiants de produits Google Play sur Android. Pointez chaque plateforme vers son propre fichier.

Régénérez les projets natifs :

   npx expo prebuild

Le plugin ajoute le fichier iOS aux ressources du bundle du projet Xcode et copie le fichier Android dans android/app/src/main/assets/. La sortie du prebuild contient des lignes comme :

[react-native-adapty] Registered ios_fallback.json as iOS bundle resource
[react-native-adapty] Copied android_fallback.json to android assets/

Enregistrez le fichier auprès du SDK au moment de l’exécution :

   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' },
   });

Les noms de fichiers passés à setFallback doivent correspondre aux noms de base des fichiers configurés sous fallbackFile.

Important

setFallback doit être exécuté avant que le SDK ne récupère le flow, le paywall ou l’onboarding cible.

Vérification

Après npx expo prebuild, vérifiez les deux plateformes :

Android : Listez le contenu de android/app/src/main/assets/. Le fichier configuré sous fallbackFile.android doit être présent, et le nom de fichier propre à iOS ne doit pas apparaître ici.
iOS : Recherchez ios/<ProjectName>.xcodeproj/project.pbxproj pour le nom de fichier iOS. Il doit apparaître dans PBXFileReference, le groupe Resources, et PBXResourcesBuildPhase. Le nom de fichier propre à Android ne doit pas apparaître dans project.pbxproj.