Оптимизация загрузки флоу и пейволов в React Native SDK

Надёжная загрузка флоу или пейвола в React Native решает три задачи: быстрый рендеринг, возврат варианта, соответствующего аудитории, и корректный резервный сценарий при медленном интернете. Правила ниже охватывают тайминг, кэширование и паттерны резервного отображения.

Tip

Предполагается, что adapty.activate() и adapty.identify() уже выполнились. См. Порядок вызовов в React Native SDK.

Правила и подводные камни

Делайте так	Не делайте так	Почему
Запрашивайте плейсмент непосредственно перед показом.	Не запрашивайте все плейсменты одновременно при запуске.	Массовый предварительный запрос блокирует JS-поток и приводит к чёрному экрану во время пиковой нагрузки.
Вызывайте `getFlow` после того, как атрибуция успела разрешиться — например, через 1–2 секунды после `activate` или после срабатывания `onLatestProfileLoad`.	Не вызывайте `getFlow` при монтировании корневого компонента.	Атрибуция ещё не загружена. Флоу разрешается для аудитории по умолчанию и незаметно обходит сегменты и персонализацию ASA.
Задавайте `loadTimeoutMs` и настраивайте резервный пейвол для каждого плейсмента.	Не ждите ответа `getFlow` бесконечно.	Без таймаута пользователи с плохим соединением видят пустой экран до разрешения сети — или закрывают приложение.

Подробнее о параметрах fetchPolicy и loadTimeoutMs — в разделе Получение пейволов и продуктов, а о выборе подходящего плейсмента — в разделе Плейсменты.

Показ медиа первого экрана из бандла приложения

Флоу загружает изображения и видео из Adapty. Чтобы медиа первого экрана отображалось мгновенно, раздавайте его из бандла приложения. Это удобно, если нужные ресурсы уже есть в приложении — например, визуалы существующего нативного онбординга.

В Flow & Paywall Builder задайте пользовательский медиаидентификатор для изображения или видео. Файл, загруженный туда, остаётся как запасной вариант.
Добавьте файл в нативные проекты: в бандл iOS-приложения и в папку assets Android.
При создании представления флоу передайте бандловый файл для этого идентификатора в 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 });

Файлы, добавленные в бандл, увеличивают размер загрузки приложения, поэтому включайте в него только медиа, которое пользователь видит первым.

Медиафайлы, которые вы не включаете в бандл, всё равно появляются сразу: в макете флоу содержится небольшая копия каждого изображения в низком разрешении, включая стоп-кадр видео, и она отображается до загрузки полного файла.

Полный справочник по customAssets см. в разделе Настройка ресурсов.

Настройка для нестабильного соединения

Для рынков с постоянно плохим соединением (сельские районы, транспорт, регионы с проблемами маршрутизации):

Устанавливайте fetchPolicy: 'return_cache_data_else_load' на каждый запрос, кроме самого первого.
Настройте резервный пейвол для каждого плейсмента в дашборде Adapty.
Устанавливайте loadTimeoutMs в 3–5 секунд и принимайте резервный пейвол при срабатывании таймаута.
Не делайте отображение флоу зависимым от getProfile(). Вызывайте getFlow независимо, чтобы медленный профиль не блокировал интерфейс.