--- 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/en/sdk/plugins/react-native/integration.md type: text/markdown title: Markdown version - href: https://yandex.com/support/varioqub-app/en/llms.txt type: text/markdown title: llms.txt --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/varioqub-app/en/llms.txt # Varioqub React Native integration [Varioqub React Native](https://github.com/appmetrica/varioqub-react-native-plugin) is a plugin for the [React Native](https://reactnative.dev/) platform. It includes the Varioqub SDK support for [Android](https://yandex.com/support/varioqub-app/en/sdk/android/integration.md) and [iOS](https://yandex.com/support/varioqub-app/en/sdk/ios/integration.md). **System requirements:** - React Native 0.74 or later. - Node.js 18. The plugin accesses native Android/iOS libraries, so to use it with Expo, you need to follow the [instructions for libraries](https://docs.expo.dev/workflow/using-libraries/#determining-third-party-library-compatibility) that integrate with native components. To use the Varioqub React Native plugin, add and initialize the AppMetrica React Native plugin. For more information on how to do this, see the [AppMetrica React Native documentation](https://appmetrica.yandex.com/docs/en/sdk/react-native/analytics/quick-start). Follow this step-by-step guide to enable and initialize Varioqub React Native. ## General integration recommendations 1. When starting a new session, call the `activateConfig()` method to get the stored flag values. 1. Run `fetchConfig()` in the background to export the new flag values from the server and activate them when the next session starts. 1. We don't recommend calling the `activateConfig()` method mid-session because it can cause inconsistent app behavior. ## Step 1. Integrate the Varioqub React Native plugin {#integration} {% list tabs %} - React Native CLI 1. Add the Varioqub React Native plugin to your project: {% list tabs %} - yarn ```bash yarn add @appmetrica/react-native-varioqub ``` - npm ```bash npm install @appmetrica/react-native-varioqub ``` {% endlist %} 1. If you're working on an iOS project, execute this command in the console: ```bash npx pod-install ``` 1. Rebuild your app: ```bash # Android: npx react-native run-android # iOS: npx react-native run-ios ``` - Expo 1. The plugin uses native Android and iOS libraries. To use native code, create a development build. [Learn more](https://docs.expo.dev/workflow/using-libraries/#determining-third-party-library-compatibility). ```bash npx expo install expo-dev-client ``` 1. Add the Varioqub React Native plugin to your project: ```bash npx expo install @appmetrica/react-native-varioqub ``` 1. Rebuild your app: ```bash # Android: npx expo run:android # iOS: npx expo run:ios ``` {% endlist %} ## Step 2. Initialize the library 1. Import the library in the source code of your project: ```javascript import Varioqub from '@appmetrica/react-native-varioqub'; ``` In this case, use `Varioqub` in your project's source code to interact with the library. 1. Initialize the Varioqub library using the `initVarioqubWithAppMetricaAdapter()` method: ```javascript Varioqub.initVarioqubWithAppMetricaAdapter({ clientId: 'appmetrica.1234567', clientFeatures: { my_cool_feature: 'true', mode: 'night' }, }); ``` To initialize the library, use the `initVarioqubWithAppMetricaAdapter(settings: VarioqubSettings)` method. It takes a `VarioqubSettings` object as a parameter. Contains required and optional settings: **Required** - `clientId`: Project ID specified as `appmetrica.XXXXXX`, where _XXXXXX_ is the app ID from the AppMetrica interface. For example, `VarioqubSettings("appmetrica.1234567")`. {% note tip %} You can find the app ID on the **Settings** page in AppMetrica: copy it from **General settings** → **App ID**. {% endnote %} **Optional** - `clientFeatures`: List of custom parameters. For example, you can pass a flag indicating if the user is subscribed to newsletters. - `fetchThrottleIntervalSeconds`: Interval between config updates, in seconds. This is only recommended for testing purposes. - `url`: Changes the URL for server responses. Only used for testing. - `logs`: Enables internal logging. To help us diagnose your problem, please enable logging and attach the log file with a description of the problem when submitting your support request. - `activateEvent`: Sends an event when the flag configuration is activated. Event sending is enabled by default. Example of Varioqub SDK integration on [GitHub](https://github.com/appmetrica/varioqub-react-native-plugin/blob/main/src/index.ts). ## Step 3. Set the default configuration You can set a default configuration so your app uses the required parameter values before it connects to a server with remote configuration. To do this, pass the list of parameters using the method `setDefaults(map: Map)`. You can download the default XML configuration file on the [Flag configuration](https://yandex.com/support/varioqub-app/en/web/config.md#create) page. ## Step 4. Run a background update of the flag configuration and activate it To use the most recent flag configuration from the interface, run a background configuration update using the `fetchConfig()` method. Each time you receive the latest version of the configuration (most often this occurs when starting a new session), you need to activate it using the `activateConfig()` method. {% note tip %} Main use case: Regularly download the configuration and activate it when the app is launched. That guarantees your flags won't change during user sessions. We recommend launching activation as soon as possible. {% endnote %} ```javascript Varioqub.fetchConfig( () => { Varioqub.activateConfig(); }, () => { console.log('Something went wrong'); }, ); ``` ## Getting flags from the interface Flag values are retrieved and returned in the following order: 1. Flag is present in the experiment. 2. Flag is present in the loaded configuration. 3. Flag is present in the default configuration. Flag getters: - `Varioqub.getString(key, default)`. Code example: ```javascript Varioqub.getString("key", "default_value"); ``` ## Obtaining the device ID to test the experiment {#get-id} To get the device ID, use the `Varioqub.getId()` method: ```javascript Varioqub.getId(); ``` {% note info %} Before the first successful `fetchConfig` call, the `Varioqub.getId()` method may return empty responses. {% endnote %} To learn more about creating and testing experiments, see [Creating an experiment](https://yandex.com/support/varioqub-app/en/web/create.md).
Contact support