Optimiser la récupération des flows et paywalls dans le SDK React Native

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.

Tip

Ces règles supposent que adapty.activate() et adapty.identify() ont déjà été résolus. Voir Ordre des appels dans le SDK React Native.

Règles et pièges

À faire	À ne pas faire	Pourquoi
Récupérez uniquement le placement que vous êtes sur le point d’afficher.	Pré-charger tous les placements en parallèle au démarrage.	Le pré-chargement en masse bloque le thread JS et provoque un écran noir pendant la rafale.
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`.	Appeler `getFlow` lors du montage du composant racine.	L’attribution n’est pas encore disponible. Le flow se résout par rapport à 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.	Attendre indéfiniment que `getFlow` réponde.	Sans délai d’expiration, 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 les produits pour la référence des paramètres fetchPolicy et loadTimeoutMs, et Placements pour choisir le bon placement.

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.

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.
Ajoutez le fichier aux projets natifs : le bundle de l’application iOS et le dossier assets d’Android.
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.