Une récupération fiable d’un flow ou d’un paywall dans React Native repose sur trois principes : un affichage rapide, le retour de la variante ciblée selon l’audience, et un comportement de secours adapté en cas de réseau lent. Les règles ci-dessous couvrent le timing, la mise en cache et les stratégies de secours pour y parvenir.

Règles et pièges

Faites ceci	Évitez cela	Pourquoi
Récupérez le placement que vous vous apprêtez à afficher, ou préchauffez le cache avec preloadFlows (SDK 4.3.0+).	Multipliez vos propres appels getFlow concurrents au démarrage.	Un burst de prefetch manuel bloque le thread JS et provoque un écran noir. preloadFlows est conçu pour ça et envoie le lot au SDK natif en un seul appel.
Appelez getFlow après que l’attribution a eu le temps de se résoudre — par exemple, 1 à 2 secondes après activate ou après le déclenchement de onLatestProfileLoad.	Appelez getFlow au montage du composant racine.	L’attribution n’est pas encore arrivée. Le flow se résout contre l’audience par défaut et contourne silencieusement les segments et la personnalisation ASA.
Définissez un loadTimeoutMs et configurez un paywall de secours pour chaque placement.	Attendez getFlow indéfiniment.	Sans timeout, les utilisateurs avec une mauvaise connexion voient un écran vide jusqu’à ce que le réseau réponde — ou ferment l’application.

Consultez Récupérer les paywalls et produits personnalisés pour la référence des paramètres fetchPolicy et loadTimeoutMs, et Placements pour choisir le bon placement.

Précharger les placements

preloadFlows met en cache le JSON du flow à l’avance — une requête par placement. Vous l’utilisez ensuite normalement : getFlow pour le flow, createFlowView pour sa vue.

fetchPolicy détermine quelle couche un getFlow ultérieur lit en premier, et non s’il peut accéder au cache :

• 'return_cache_data_else_load' lit d’abord la copie préchargée et ne contacte le réseau que si rien n’est en cache. 'return_cache_data_if_not_expired_else_load' fait de même tant que la copie est plus récente que maxAgeSeconds.
• La valeur par défaut, 'reload_revalidating_cache_data', contacte d’abord le réseau et se replie sur la copie préchargée en cas d’échec ou d’expiration du délai.

Un préchargement est utile dans les deux cas, mais différemment : une politique cache-first supprime la requête, tandis que la valeur par défaut la conserve et dispose d’une copie de secours prête à l’emploi.

Utilisez cette méthode quand vous savez quels placements la session va nécessiter, mais que vous ne souhaitez pas les afficher tout de suite — par exemple, juste après la résolution de activate et identify, pour le flow derrière un bouton que l’utilisateur n’a pas encore appuyé.

try {
  await adapty.preloadFlows(['onboarding', 'main_paywall'], {
    loadTimeoutMs: 5000,
  });
} catch (error) {
  // at least one placement failed to preload
}

// Later, when the user reaches the paywall:
const flow = await adapty.getFlow('main_paywall', {
  fetchPolicy: 'return_cache_data_else_load',
});

Paramètres :

• placementIds (requis) : les placements à précharger.
• loadTimeoutMs (optionnel) : le délai d’expiration en millisecondes. Par défaut à 5000, et les valeurs inférieures à 1000 sont relevées à 1000. Sur iOS, le délai s’applique à l’ensemble du lot ; sur Android, à chaque placement.

Comportement à connaître :

• La promesse est rejetée uniquement après que tous les placements ont été tentés, et l’erreur agrège les échecs par placement. L’échec d’un placement n’arrête pas les autres, et les placements chargés restent dans le cache.
• Si un placement expire ou échoue avec une erreur réseau, le SDK revient à la variante d’audience par défaut pour ce placement. Les autres échecs sont signalés tels quels.
• Le préchargement ne fait que réchauffer le cache. Il ne retourne pas de contenu — vous appelez toujours getFlow pour l’afficher.

Ce que couvre un préchargement

Un flow s’affiche à l’écran par couches. Un préchargement couvre la première, exactement comme getFlow :

Couche	Récupérée par	Préchauffée par un préchargement
JSON du flow — la variante sélectionnée, ses identifiants de produits et la Remote Config	getFlow	Oui
Mise en page UI — structure, styles et textes de l’écran	createFlowView	Non
Images, y compris l’image fixe qui remplace un élément vidéo	createFlowView, en arrière-plan	Non
Fichiers vidéo	Le lecteur système, lors du rendu de l’écran	Non mis en cache par le SDK

Ainsi, le premier createFlowView pour un layout donné implique quand même un aller-retour réseau après un préchargement. Le SDK natif conserve ensuite ce layout dans son cache disque, qui survit aux redémarrages de l’application — le coût est donc supporté par la première requête, et non par chacune d’elles.

Ignorer la segmentation d’audience

Pour préchauffer le cache sans attendre la segmentation d’audience, utilisez la variante d’audience par défaut. Elle ne nécessite aucun délai d’expiration :

await adapty.preloadFlowsForDefaultAudience(['main_paywall']);

Afficher les médias du premier écran depuis le bundle de l’application

Un flow télécharge ses images et vidéos depuis Adapty. Pour afficher les médias du premier écran instantanément, servez-les depuis le bundle de l’application. C’est une bonne façon de réutiliser des médias que vous livrez déjà, comme les visuels d’un onboarding natif existant.

1. Dans le Flow & Paywall Builder, définissez un identifiant de média personnalisé sur l’image ou la vidéo. Le fichier que vous y importez reste comme secours.
2. Ajoutez le fichier aux projets natifs : le bundle de l’application iOS et le dossier assets d’Android.
3. Lors de la création de la vue du flow, transmettez le fichier intégré pour cet identifiant dans customAssets :

// "welcome_video" is the custom media ID set in the Flow & Paywall Builder
const bundledAssets: Record<string, AdaptyCustomAsset> = {
  'welcome_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'welcome.mp4' },
      android: { relativeAssetPath: 'videos/welcome.mp4' },
    },
  },
};

const view = await createFlowView(flow, { customAssets: bundledAssets });

Les fichiers embarqués augmentent la taille de téléchargement de votre application, donc n’embarquez que les médias que les utilisateurs voient en premier.

Les médias que vous ne regroupez pas s’affichent quand même immédiatement : la mise en page du flow inclut une petite copie basse résolution de chaque image, y compris la vignette d’une vidéo, et l’affiche jusqu’au chargement complet du fichier.

Pour la référence complète de customAssets, consultez Personnaliser les ressources.

Optimiser pour les connexions faibles

Pour les marchés où la connectivité est régulièrement mauvaise (zones rurales, transports, régions affectées par le routage) :

• Définissez fetchPolicy: 'return_cache_data_else_load' sur chaque requête, sauf la toute première.
• Configurez un paywall de secours pour chaque placement dans l’Adapty Dashboard.
• Définissez loadTimeoutMs à 3–5 secondes et acceptez le paywall de secours quand le délai expire.
• Ne conditionnez pas l’affichage du flow à getProfile(). Appelez getFlow indépendamment pour qu’un profil lent ne bloque pas l’interface.