Utiliser les paywalls de secours dans un projet Expo

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

To maintain a fluid user experience, it is important to set up fallbacks for your flows, paywalls, and onboardings. This precaution extends the application’s capabilities in case of partial or complete loss of internet connection.

If the application cannot access Adapty servers:

It will be able to display a fallback flow or paywall, and access the local onboarding configuration.
If the application cannot access the internet:

It will be able to display a fallback flow or paywall. Onboardings include remote content and require an internet connection to function.

Before you follow the steps in this guide, download the fallback configuration files from Adapty.

Le SDK Adapty lit le fichier de secours depuis le bundle natif — une ressource iOS à l’intérieur du 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 n’est donc pas possible d’y déposer les fichiers manuellement. Le plugin de configuration react-native-adapty intègre le fichier dans le bundle natif à votre place.

Une configuration complète et fonctionnelle est disponible dans l’exemple d’application FocusJournalExpo.

Configuration

Placez les fichiers JSON de secours n’importe où dans votre projet — généralement à côté des autres ressources :
```
<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 optionnelle — 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"
          }
        }
      ]
    ]
  }
}
```
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 inclut 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.

setFallback doit s’exécuter 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 réservé à iOS ne doit pas apparaître ici.
iOS : Recherchez le nom de fichier iOS dans ios/<ProjectName>.xcodeproj/project.pbxproj. Il doit apparaître dans PBXFileReference, le groupe Resources, et PBXResourcesBuildPhase. Le nom de fichier réservé à Android ne doit pas apparaître dans project.pbxproj.