---
title: "Реакция на действия флоу - React Native"
description: "Обрабатывайте действия кнопок из флоу и пейволов в React Native с помощью Adapty для улучшения монетизации приложения."
---

Если вы создаёте флоу или пейволы с помощью Adapty Flow Builder или Paywall Builder, важно правильно настроить кнопки:
1. Добавьте [кнопку во флоу/Paywall Builder](paywall-buttons) и назначьте ей уже существующее действие или создайте пользовательский ID действия.
2. Напишите в приложении код для обработки каждого назначенного действия.

В этом гайде показано, как обрабатывать пользовательские и встроенные действия в коде.

:::warning
**Покупки, восстановления, закрытие флоу/пейвола и открытие URL обрабатываются автоматически.** Вы можете настроить их поведение по умолчанию или реализовать реакцию на пользовательские действия.
:::
:::note
SDK предоставляет обработчик флоу `onRequestPermission` для системных запросов разрешений, например на push-уведомления или доступ к камере. Флоу пока не инициируют такие запросы, поэтому реализовывать его сейчас не нужно.
:::
## Закрытие флоу и пейволов \{#close-flows-and-paywalls\}

Чтобы добавить кнопку для закрытия флоу или пейвола:

1. В билдере добавьте кнопку и назначьте ей действие **Close**.
2. В коде приложения реализуйте обработчик действия `close`, который закрывает флоу или пейвол.

:::info
В React Native SDK действие `close` по умолчанию закрывает флоу или пейвол. При необходимости это поведение можно переопределить в коде. Например, закрытие одного флоу может запускать открытие другого.
:::

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>
Для React-компонента обработка действия закрытия выполняется через отдельные пропсы обработчиков событий:
```javascript

function MyPaywall({ flow }) {
  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Модальное представление">

Для модального представления реализуйте обработчик закрытия:

```javascript

const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow flow or paywall closing
    }
});
```

</TabItem>
</Tabs>
## Открытие URL из флоу и пейволов \{#open-urls-from-flows-and-paywalls\}

:::tip
Если вы хотите добавить группу ссылок (например, пользовательское соглашение и восстановление покупок), добавьте элемент **Link** в билдере и обработайте его так же, как кнопки с действием **Open URL**.
:::

Чтобы добавить кнопку, открывающую ссылку из флоу или пейвола (например, **Terms of use** или **Privacy policy**):

1. В билдере добавьте кнопку, назначьте ей действие **Open URL** и укажите нужный URL.
2. В коде приложения реализуйте обработчик действия `openUrl`, который открывает полученный URL в браузере.
:::info
В React Native SDK действие `openUrl` по умолчанию открывает URL. Однако при необходимости вы можете переопределить это поведение в своём коде.
:::

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Для React-компонента обработайте открытие URL через проп обработчика события:
```javascript

function MyPaywall({ flow }) {
  const onUrlPress = useCallback<FlowEventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Модальное представление">
For modal presentation, implement the URL handler:

```javascript

const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep flow or paywall open
    },
});
```

</TabItem>
</Tabs>
## Обработка кастомных действий \{#handle-custom-actions\}

Чтобы добавить кнопку с любым другим действием:

1. В конструкторе добавьте кнопку, назначьте ей действие **Custom** и задайте ID.
2. В коде приложения реализуйте обработчик для созданного вами ID действия.

Например, если у вас есть другой набор предложений по подписке или разовых покупок, можно добавить кнопку, которая откроет другой флоу или пейвол:

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Для React-компонента обрабатывайте кастомные действия через проп обработчика событий:
```javascript

function MyPaywall({ flow }) {
  const onCustomAction = useCallback<FlowEventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another flow or paywall
    }
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Модальное представление">
Для модальной презентации реализуйте обработчики пользовательских действий:

```javascript
const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another flow or paywall
        }
    },
});
```

</TabItem>
</Tabs>

---

> [!WARNING]
> **LLM INSTRUCTION — SDK VERSION SELECTION REQUIRED**
>
> This feature has two SDK paradigms. Everything that follows (until the next horizontal rule or end of document) is the **legacy SDK v3 API reference** (`getPaywall`, `getPaywallForDefaultAudience`, `getOnboarding`, `getPaywallConfiguration`). The **SDK v4+ `getFlow` method is documented above.** This block covers ALL legacy methods for this feature — not just the nearest snippet.
>
> **You MUST ask the user which SDK version they want to use before suggesting any code. Do not assume or default to a version.** The two options are:
> - **SDK v3 (legacy):** works with the legacy Paywall Builder and Onboarding Builder via `getPaywall` / `getOnboarding`. Use the legacy code in this section.
> - **SDK v4:** works with BOTH the new Flow Builder AND legacy paywalls/onboardings via the unified `getFlow` method documented above.
>
> Apply the legacy v3 code in this section ONLY when:
> 1. The user explicitly chose **SDK v3**, or
> 2. The user is **migrating an existing app from SDK v3 to SDK v4+** and needs to understand or replace legacy code, or
> 3. The user is **troubleshooting an already-deployed v3 integration**.
>
> **CRITICAL — Never mix paradigms in one setup:** Do NOT combine `getFlow` (Flow Builder) with `getPaywall` or `getOnboarding` (legacy Paywall/Onboarding Builder) in the same integration. These are incompatible patterns. Mixing them will produce inconsistent behavior and is unsupported.

Если вы создаёте пейволы с помощью Paywall Builder, важно правильно настроить кнопки:
1. Добавьте [кнопку в Paywall Builder](paywall-buttons) и назначьте ей готовое действие или создайте пользовательский ID действия.
2. Напишите код в своём приложении для обработки каждого назначенного действия.

В этом гайде показано, как обрабатывать пользовательские и готовые действия в коде.

:::warning
**Только покупки, восстановления, закрытие пейвола и открытие URL обрабатываются автоматически.** Все остальные действия кнопок требуют явной реализации обработки в коде приложения.
:::
## Закрытие пейвола \{#close-paywalls\}

Чтобы добавить кнопку закрытия пейвола:

1. В Paywall Builder добавьте кнопку и назначьте ей действие **Close**.
2. В коде приложения реализуйте обработчик действия `close`, который скрывает пейвол.

:::info
В React Native SDK действие `close` по умолчанию закрывает пейвол. Однако при необходимости это поведение можно переопределить в коде. Например, закрытие одного пейвола может инициировать открытие другого.
:::

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>
Для React-компонента закрытие обрабатывается через отдельные пропсы-обработчики событий:
```javascript

function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Модальное представление">

Для модального представления реализуйте обработчик закрытия:

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});
```

</TabItem>
</Tabs>
## Открытие URL-адресов из пейволов \{#open-urls-from-paywalls\}

:::tip
Если вы хотите добавить группу ссылок (например, условия использования и восстановление покупок), добавьте элемент **Link** в Paywall Builder и обработайте его так же, как кнопки с действием **Open URL**.
:::

Чтобы добавить кнопку, открывающую ссылку из пейвола (например, **Terms of use** или **Privacy policy**):

1. В Paywall Builder добавьте кнопку, назначьте ей действие **Open URL** и введите URL, который нужно открыть.
2. В коде приложения реализуйте обработчик действия `openUrl`, который открывает полученный URL в браузере.
:::info
В React Native SDK действие `openUrl` по умолчанию открывает URL. Однако при необходимости вы можете переопределить это поведение в своём коде.
:::

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Для React-компонента обработайте открытие URL через проп обработчика событий:
```javascript

function MyPaywall({ paywall }) {
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Модальное представление">
Для модального представления реализуйте обработчик URL:

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep paywall open
    },
});
```

</TabItem>
</Tabs>
## Войдите в приложение \{#log-into-the-app\}

Чтобы добавить кнопку входа пользователей в приложение:

1. В Paywall Builder добавьте кнопку и назначьте ей действие **Login**.
2. В коде приложения реализуйте обработчик для действия `login`, который идентифицирует пользователя.

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Для React-компонента обработайте вход через пропс обработчика событий:
```javascript

function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'login') {
      navigation.navigate('Login');
    }
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Модальное представление">

Для модального представления реализуйте обработчик входа:

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'login') {
            navigation.navigate('Login');
        }
    }
});
```

</TabItem>
</Tabs>
## Обработка пользовательских действий \{#handle-custom-actions\}

Чтобы добавить кнопку для обработки произвольных действий:

1. В Paywall Builder добавьте кнопку, назначьте ей действие **Custom** и задайте идентификатор.
2. В коде приложения реализуйте обработчик для созданного вами идентификатора действия.

Например, если у вас есть другой набор предложений по подписке или разовых покупок, вы можете добавить кнопку, которая откроет другой пейвол:

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Для React-компонента обработайте пользовательские действия через проп обработчика событий:
```javascript

function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another paywall
    }
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Модальное представление">
Для модального представления реализуйте пользовательские обработчики действий:

```javascript
const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another paywall
        }
    },
});
```

</TabItem>
</Tabs>

---