---
metadata:
  - name: generator
    content: Diplodoc Platform v5.55.3
alternate:
  - https://yandex.com/support/varioqub-app/en/sdk/plugins/react-native/integration.md
  - https://yandex.com/support/varioqub-app/ru/sdk/plugins/react-native/integration.md
  - href: https://yandex.com/support/varioqub-app/ru/sdk/plugins/react-native/integration.md
    type: text/markdown
    title: Markdown version
  - href: https://yandex.com/support/varioqub-app/ru/llms.txt?revision=r20853974
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/varioqub-app/ru/llms.txt?revision=r20853974

# Интеграция Varioqub React Native

[Varioqub React Native](https://github.com/appmetrica/varioqub-react-native-plugin) — это плагин для платформы [React Native](https://reactnative.dev/). Он включает поддержку Varioqub SDK для [Android](https://yandex.com/support/varioqub-app/ru/sdk/android/integration.md) и [iOS](https://yandex.com/support/varioqub-app/ru/sdk/ios/integration.md).

**Системные требования:**

- React Native 0.74 и выше.
- Node.js 18.

Чтобы использовать плагин с Expo, нужно выполнить [инструкции для библиотек](https://docs.expo.dev/workflow/using-libraries/#determining-third-party-library-compatibility), работающих с нативной частью, так как плагин обращается к нативным Android/iOS-библиотекам.

Для работы плагина Varioqub React Native подключите и инициализируйте плагин AppMetrica React Native. Подробнее о том, как это можно сделать, читайте в [документации AppMetrica React Native](https://appmetrica.yandex.ru/docs/ru/sdk/react-native/analytics/quick-start).

Ниже описаны этапы подключения и инициализации Varioqub React Native.

## Общие рекомендации при интеграции

1. При старте новой сессии вызывайте метод `activateConfig()`, чтобы получить значения сохраненных флагов.

1. Запускайте `fetchConfig()` в фоне, чтобы выгрузить новые значения флагов с сервера и активировать их при старте следующей сессии.

1. Не рекомендуется вызывать метод `activateConfig()` в середине сессии — это может привести к неконсистентному поведению приложения.

## Шаг 1. Подключите плагин Varioqub React Native {#integration}

{% list tabs %}

- React Native CLI

    1. Установите плагин Varioqub React Native в ваш проект:

        {% list tabs %}

        - yarn

          ```bash
          yarn add @appmetrica/react-native-varioqub
          ```

        - npm

          ```bash
          npm install @appmetrica/react-native-varioqub
          ```

        {% endlist %}

    1. Для проектов на платформе iOS выполните следующую консольную команду:

        ```bash
        npx pod-install
        ```

    1. Пересоберите ваше приложение:

        ```bash
        # Android:
        npx react-native run-android

        # iOS:
        npx react-native run-ios
        ```

- Expo

    1. Плагин использует нативные библиотеки Android и iOS. Чтобы использовать нативный код, создайте development build. [Подробнее](https://docs.expo.dev/workflow/using-libraries/#determining-third-party-library-compatibility).

        ```bash
        npx expo install expo-dev-client
        ```

    1. Установите плагин Varioqub React Native в ваш проект:

        ```bash
        npx expo install @appmetrica/react-native-varioqub
        ```

    1. Пересоберите ваше приложение:

        ```bash
        # Android:
        npx expo run:android

        # iOS:
        npx expo run:ios
        ```

{% endlist %}

## Шаг 2. Инициализируйте библиотеку

1. Импортируйте библиотеку в исходном коде вашего проекта:

    ```javascript
    import Varioqub from '@appmetrica/react-native-varioqub';
    ```

    В этом случае используйте `Varioqub` в коде проекта для работы с библиотекой.

1. Инициализируйте библиотеку Varioqub с помощью метода `initVarioqubWithAppMetricaAdapter()`:

    ```javascript
    Varioqub.initVarioqubWithAppMetricaAdapter({
        clientId: 'appmetrica.1234567',
        clientFeatures: {
            my_cool_feature: 'true',
            mode: 'night'
        },
    });
    ```

Для инициализации библиотеки используется метод `initVarioqubWithAppMetricaAdapter(settings: VarioqubSettings)`. В качестве параметров он принимает объект `VarioqubSettings`.

Содержит обязательные и опциональные настройки:

**Обязательные**

- `clientId` — идентификатор проекта в формате `appmetrica.XXXXXX`, где _XXXXXX_ — идентификатор приложения из интерфейса AppMetrica (например, `VarioqubSettings("appmetrica.1234567")`).

    <!-- source: ru/sdk/_includes/application-id.md -->
    {% note tip %}

    ID приложения можно получить на странице **Настройки** AppMetrica: скопируйте его из **Общие настройки** → **ID приложения**.

    {% endnote %}
    <!-- endsource: ru/sdk/_includes/application-id.md -->

**Опциональные**

- `clientFeatures` — список пользовательских параметров. Например, признак того, что пользователь подписан на рассылки.

- `fetchThrottleIntervalSeconds` — ограничение частоты обновления конфига в секундах. Рекомендуется использовать только для тестирования.

- `url` — изменение URL для ответов сервера. Используется только для тестов.

- `logs` — включение внутреннего логирования. При обращении в поддержку лучше сначала включить логирование и отправить лог с описанием проблемы.

- `activateEvent` — отправка события при активации конфигурации флагов. По умолчанию отправка события включена.

Пример интеграции Varioqub SDK на [GitHub](https://github.com/appmetrica/varioqub-react-native-plugin/blob/main/src/index.ts).

## Шаг 3. Задайте конфигурацию по умолчанию

Вы можете установить конфигурацию по умолчанию, чтобы ваше приложение использовало необходимые значения параметров до того, как оно подключится к серверу с удаленной конфигурацией. Для этого передайте список параметров с помощью метода `setDefaults(map: Map<string, any>)`.

Вы можете скачать XML-файл конфигурации по умолчанию со страницы [Конфиг флагов](https://yandex.com/support/varioqub-app/ru/web/config.md#create).

## Шаг 4. Запустите обновление конфигурации флагов в фоне и активируйте конфигурацию

Чтобы использовать самую свежую конфигурацию флагов из интерфейса, запустите фоновое обновление конфигурации с помощью метода `fetchConfig()`.

Каждый раз при получении самой свежей версии конфигурации (чаще всего это происходит при старте новой сессии) необходимо активировать ее с помощью метода `activateConfig()`.

<!-- source: ru/sdk/_includes/config-note.md -->
{% note tip %}

Основной сценарий использования:

Периодически скачивайте конфигурацию и активируйте ее при запуске приложения. Это гарантирует, что флаги не поменяются во время пользовательской сессии. Рекомендуется запускать активацию как можно раньше.

{% endnote %}
<!-- endsource: ru/sdk/_includes/config-note.md -->

```javascript
Varioqub.fetchConfig(
  () => {
    Varioqub.activateConfig();
  },
  () => {
    console.log('Something went wrong');
  },
);
```

## Получение флагов из интерфейса

Значения флагов вычисляются и предоставляются в следующем порядке:

1. Флаг есть в эксперименте.
2. Флаг есть в загруженной конфигурации.
3. Флаг есть в конфигурации по умолчанию.

Методы для получения флагов:

- `Varioqub.getString(key, default)`.

Пример кода:

```javascript
Varioqub.getString("key", "default_value");
```

## Получение ID устройства для проверки эксперимента {#get-id}

Для получения ID устройства используйте метод `Varioqub.getId()`:

```javascript
Varioqub.getId();
```

<!-- source: ru/sdk/_includes/getid-empty.md -->
{% note info %}

До первого успешного вызова `fetchConfig` метод `Varioqub.getId()` может возвращать пустой ответ.

{% endnote %}
<!-- endsource: ru/sdk/_includes/getid-empty.md -->

Подробнее о создании и проверке эксперимента читайте в разделе [Создание эксперимента](https://yandex.com/support/varioqub-app/ru/web/create.md).


<!-- source: ru/_includes/neuroexpert.md -->
<hr>

Задайте вопрос Нейроэксперту — в правом нижнем углу нажмите ![](../../../_images/neuro.png =150x).
<!-- endsource: ru/_includes/neuroexpert.md -->