Optimizar la obtención de flows y paywalls en el SDK de React Native

Una obtención fiable de un flow o paywall en React Native hace tres cosas: renderiza rápido, devuelve la variación dirigida a la audiencia y recurre al respaldo de forma elegante cuando la red es lenta. Las reglas que se describen a continuación cubren los patrones de temporización, caché y respaldo para conseguirlo.

Tip

Las reglas asumen que adapty.activate() y adapty.identify() ya se han resuelto. Consulta Orden de llamadas en React Native SDK.

Reglas y errores comunes

Haz esto	No hagas esto	Por qué
Obtén el placement que vas a mostrar.	Precarga todos los placements de forma concurrente al arrancar.	La precarga masiva bloquea el hilo JS y produce una pantalla en negro durante el pico.
Llama a `getFlow` después de que la atribución haya tenido oportunidad de resolverse — por ejemplo, 1-2 segundos después de `activate` o tras que se dispare `onLatestProfileLoad`.	Llama a `getFlow` en el montaje del componente raíz.	La atribución aún no ha llegado. El flow se resuelve contra la audiencia predeterminada y omite silenciosamente los segmentos y la personalización de ASA.
Establece un `loadTimeoutMs` y configura un paywall de respaldo para cada placement.	Espera indefinidamente a `getFlow`.	Sin un timeout, los usuarios con mala conectividad ven una pantalla en blanco hasta que la red responde — o cierran la app.

Consulta Obtener paywalls y productos para la referencia de los parámetros fetchPolicy y loadTimeoutMs, y Placements para elegir el placement adecuado.

Mostrar el contenido multimedia de la primera pantalla desde el bundle de la app

Un flow descarga sus imágenes y vídeos desde Adapty. Para mostrar el contenido multimedia de la primera pantalla de forma instantánea, sírvelo desde el bundle de la app. Es una buena manera de reutilizar los recursos que ya tienes, como los elementos visuales de un onboarding nativo existente.

En el Flow & Paywall Builder, establece un ID de medio personalizado en la imagen o el vídeo. El archivo que subas allí se usará como respaldo.
Añade el archivo a los proyectos nativos: el bundle de la app iOS y la carpeta assets de Android.
Al crear la vista del flow, pasa el archivo incluido en el bundle para ese ID en 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 });

Los archivos incluidos aumentan el tamaño de descarga de tu app, así que incluye solo los recursos multimedia que los usuarios ven primero.

Los archivos multimedia que no incluyas en el bundle se muestran de inmediato de todas formas: el layout del flow incluye una copia pequeña de baja resolución de cada imagen, incluido el fotograma estático de un vídeo, y la muestra hasta que se cargue el archivo completo.

Para la referencia completa de customAssets, consulta Personalizar assets.

Ajustes para conectividad deficiente

Para mercados con conectividad habitualmente deficiente (zonas rurales, transporte, regiones con problemas de enrutamiento):

Establece fetchPolicy: 'return_cache_data_else_load' en todas las llamadas excepto la primera.
Configura un paywall de respaldo para cada placement en el Adapty Dashboard.
Establece loadTimeoutMs entre 3 y 5 segundos y acepta el paywall de respaldo cuando se agote el tiempo.
No condicionales la visualización del flow a getProfile(). Llama a getFlow de forma independiente para que un perfil lento no bloquee la UI.