--- updatedAt: 2026-06-14T07:43:21.000Z agentTools: projectIndex: https://developers.wingify.com/v2/llms.txt --- # React Native Guide ## Create an Account You can create a free account with us by accessing the [signup page](https://vwo.com/free-trial/). To create and run A/B tests, sign in to the Wingify dashboard and then select [Mobile App A/B](https://app.wingify.com/#/test/mobile-ab) on the menu. If you are using the Wingify A/B testing feature for the first time, click **Start Mobile App A/B Testing** to begin. ![](https://files.readme.io/8e6b451-Screen_Shot_2017-12-15_at_3.15.46_PM.png "Screen Shot 2017-12-15 at 3.15.46 PM.png") To create A/B tests for mobile apps: Add the mobile app to be tested. Define the variables you want to test. Create A/B tests ## Create an App Registering your app on Wingify is a one-time process.\ Adding your app generates an `Api Key`, which is used by Wingify servers to recognize your app. Select the **Mobile App A/B** option under the test menu.\ Click **Create**, and then click **Add App**. Write a name for your app, and in the **Platform** option, select **Android**. Note the api key generated by the system. ## Add the mobile app to be tested To add a new app for A/B testing, go to the **Apps** section on the page. ![](https://files.readme.io/16402bf-7c4d57f-MobileAppAB-1.png "7c4d57f-MobileAppAB-1.png") On the right side of the screen, click **Create App**.\ Type the name of the app you want to add, and then click **Create**. ![](https://files.readme.io/6c8d833-be06a8c-MobileAppAB-1.jpg "be06a8c-MobileAppAB-1.jpg") As you add an app, Wingify generates API Keys for both the iOS and Android platforms. You can make a note of the API Key under the Settings section and are used during app initialization. ## Defining the Variables You Want To Test Test variables are elements or parameters of your mobile app. After you define a variable, you can run an unlimited number of A/B tests on the variable, without doing any code changes or redeployment. For example, you can create a string-type variable for testing different text versions in the app screen. Under the **Apps** tab, select the mobile app for which you want to create test variables. To add an element for testing, under Variables section, click **Create** Variable. Assign a name to the variable, and then select its data type. Type **Default Value** (current value or a value if there is no A/B test). To add the variable, click Create. You can add multiple variables to an app. ![](https://files.readme.io/d60e5f5-d03146b-517c125-preview.png "d03146b-517c125-preview.png") ## Creating A/B Tests for Mobile Apps On the **Mobile App A/B** testing screen, go to the **Campaigns** tab, and then click **Create**. Choose the App you want to test. All mobile apps you have added to Wingify are listed here. Select a platform where the app is running. Enter a unique identifier in the **Define a test key** field to filter your tests easily. The test key helps you execute custom logic, as explained in this [iOS Code Blocks](https://developers.wingify.com/reference/ios-code-blocks)/[Android Code Blocks](https://developers.wingify.com/reference/android-code-blocks) section. ![](https://files.readme.io/fc1361e-0e3b074-mobile-app-6.jpg "0e3b074-mobile-app-6.jpg") Select Next and click **Add Variable**. All the variables you have created for the test are displayed here. You can choose to Create Variable by adding a new test variable. ![](https://files.readme.io/ac10969-b3b8c33-mobile-app-ab-7.jpg "b3b8c33-mobile-app-ab-7.jpg") Select the variable you want to test, and then enter the variation values. You can test multiple variables in one test. In the example above, we have added speed variable, defined value as 20 for the variation. For control, the value is 10, which is the default value for the variable. Based on the test key and variation names, Wingify generates the code snippet that you can use in the mobile app. To continue, click **Next** ## Define Goals In the next step, define at least one goal. The Goal is a conversion matrix that you may want to optimize. To edit the goal name, click the corresponding **Goal** icon. In the box below the **Goal\*** icon, select the drop-down menu to select an event that you want to track. Provide the relevant information in the **Goal Identifier** text box. To define more goals, select **Add Another Goal** or select **Next**. ```text conversionGoal ``` ## Finalize In the **Finalize** step, we need to specify the campaign name. Next, we can set the percentage of users that we want to include in the campaign. Under **Integrate With Third-Party Products**, select the box corresponding to the product name with which you want to integrate the app. Under **Advanced Options**, you can also target the campaign for specific user types, enable scheduling, customize traffic allocation for each variation, or make the user part of the campaign on app launch. For quick setup, we can leave those settings to default. Click **Finish**. On the next screen, click **Start Now** to run the campaign. ## Installing Library Install library using `npm` or `yarn` ```shell $ yarn add vwo-react-native ``` ## iOS 1. Add `pod 'VWO'` Podfile file present in ios directory. 2. `cd ios && pod install` 3. Open Xcode workspace, drag all the files from `node_modules/vwo-react-native/iOS` to your project. ![](https://files.readme.io/a4507f3-vwo-react-demo.gif "vwo-react-demo.gif") ## Android 1. Link the vwo-react-native library. ```shell $ react-native link vwo-react-native ``` 2. Add this to your `android/build.gradle` file. ```groovy allprojects { repositories { ... mavenCentral() ... } } ``` ### Manual installation 1. Open `android/app/src/main/java/[...]/MainActivity.java` * Add `import com.vwo.VWOReactNativePackage;` to the imports at the top of the file. * Add `new VWOReactNativePackage()` to the list returned by the `getPackages()` method. 2. Append the following lines to `android/settings.gradle`: ```groovy include ':vwo-react-native' project(':vwo-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/vwo-react-native/android') ``` 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: ```groovy compile project(':vwo-react-native') ``` 4. Add this in your `android/build.gradle` file ```groovy allprojects { repositories { ... mavenCentral() ... } } ``` #### Enable the preview mode Preview is by default enabled for debug build. To enable the preview mode in the release build. Shake your device 3-4 times. #### Disable the preview mode Preview mode can be disabled by setting the `disablePreview` flag to true in your `config` object. ```javascript var config = { disablePreview: true } ``` ## Code changes > 📘 > > Throughout our SDK in all callbacks, we use Node's convention to make the first parameter an error object (usually null when there is no error) and the rest are the results of the function. ## 1. Initialising the SDK After installing the library, you would want to initialize it.\ Import the Library as follows: ```javascript import VWO from 'vwo-react-native'; ``` Library can be initialized in the following ways: #### I. Launching Wingify SDK ```javascript var config = { optOut: false, disablePreview: false, customVariables: {}} VWO.launch('YOUR_API_KEY', config).then(() => { console.log("Launch success " + key); }); ``` #### Launch configuration You can pass a `config` object during the launch of the Wingify SDK. `Config` is a javascript object which can have following keys: * `optOut`: it can have a boolean value which tells the Wingify SDK whether to initialize the SDK or not. It defaults to false. * `disablePreview`: Boolean value to turn on or off the preview mode. It defaults to false. * `customVariables`: Takes in a javascript object as its value. Check [Targeting Visitor Groups](https://developers.wingify.com/reference/ios-targeting-visitor-groups) / [Targeting Visitor Groups](https://developers.wingify.com/reference/android-targeting-visitor-groups) for more details. It defaults to an empty object. * `customDimensionKey`: String value which is the unique key associated with a particular custom dimension made in the Wingify application. Check [Push Custom Dimension](https://developers.wingify.com/reference#4-push-custom-dimension) for more details. It defaults to an empty String. * `customDimensionValue`: String value which is the value you want to tag a custom dimension with. Check [Push Custom Dimension](https://developers.wingify.com/reference#4-push-custom-dimension) for more details. It defaults to an empty String. If you do not wish to pass any `config` object, you can pass a `null`. ```javascript var config = { optOut: false, disablePreview: true, customVariables: { user_type: "free" }, customDimensionKey: "CUSTOM_DIMENSION_KEY", customDimensionValue: "CUSTOM_DIMENSION_VALUE" } ``` You can set this config object as follows: ```javascript VWO.launch('YOUR_API_KEY', config).then(() => { console.log("Launch success " + key); }); ``` ## 2. Using campaign To use the variation defined during campaign creation, use an of the following function to get the value for the campaign keys. ```javascript VWO.objectForKey(key, DEFAULT_VALUE).then((result) => { // Your Code here }); VWO.intForKey("key", 1).then((result) => { // Your code here }); VWO.stringForKey("key", "default_value").then((result) => { // Your code here }); VWO.floatForKey("key", 0.0).then((result) => { // Your code here }); VWO.boolForKey("key", false).then((result) => { // Your code here }); ``` When these methods are invoked, the SDK checks if the targeting conditions hold true for the current user.\ If targeting/segmentation conditions hold true, the user is made part of the campaign and visitor counts in the report section increments by one (once per user). Test can also be created without variables. Campaign test key can be used to fetch the variation name. This variation name can be used to execute custom logic. ```javascript VWO.variationNameForTestKey("campaign_key").then((variationName) => { if (variationName == "Control") { // Control code } else if (variationName == "Variation-1") { // Variation 1 code } else { // Default code } }); ``` > 📘 NOTE > > Can be called only after SDK initialisation. Otherwise, a null value is returned. ## 3. Triggering goals We would track the effect of this campaign on our conversion metric.\ Earlier we defined `conversionGoal` as a goal.\ We need to tell the Wingify SDK when this conversion happens. Use the following code to trigger this goal. ```javascript var goal = "conversionGoal"; VWO.trackConversion(goal); ``` For triggering revenue goal use method `trackConversionWithValue(goal, value)`. ```javascript var goal = "conversionGoal"; VWO.trackConversionWithValue(goal, 133.25); ``` > 📘 NOTE > > Can be called only after SDK initialisation. Otherwise, the goal is not marked. ## 4. Push Custom Dimension Pushes a custom dimension for a particular user to the Wingify server. It is used for post-segmenting the data in the campaign reports. Read [here](https://help.vwo.com/hc/en-us/articles/360038019054-Creating-a-Custom-Dimension-in-VWO) on how to create custom dimension in Wingify The API method accepts a custom dimension key - *customDimensionKey* and custom dimension value - *customDimensionValue*. *customDimensionKey* is the unique key associated with a particular custom dimension made in the Wingify application. *customDimensionValue* is the value you want to tag a custom dimension with. ```javascript VWO.pushCustomDimension("CUSTOM_DIMENSION_KEY", "CUSTOM_DIMENSION_VALUE"); ``` ## Logging To enable logging in SDK, use `VWO.setLogLevel(level)`.\ You can set different log levels depending upon the priority of logging as follows: * **logLevelDebug**: Gives detailed logs. * **logLevelInfo**: Informational logs * **logLevelWarning**: Warning is a message level indicating a potential problem. * **logLevelError**: Indicates Error * **logLevelOff**: No logs are printed The different methods set the log level of the message. Wingify will only print messages with a log level that is greater to or equal to it's current log level setting. So a logger with a level of Warning will only output log messages with a level of Warning, or Error. ```javascript VWO.setLogLevel(VWO.logLevelDebug); ``` > 📘 > > See [Android Logging](https://developers.wingify.com/reference/android-logging) for verbose logging in Android SDK. ## Opt out To opt out of tracking by Wingify, use `config` object to set OptOut to true or false. This `config` object is passed when `VWO.launch` function is called. ```javascript var config = {optOut: false} VWO.launch('YOUR_API_KEY', config).then(() => { console.log("Launch success " + key); }); ``` ## Reports From the **Mobile App A/B** menu, select your campaign and click **Detailed Reports** to see reports of your campaign. ## Source Code Wingify React-Native Library code is available on GitHub:\ ## Next Steps As a next step, take a look at:\ Detailed iOS documentation: [SDK Reference](https://developers.wingify.com/reference/ios-sdk-reference)\ Detailed Android documentation: [SDK Reference](https://developers.wingify.com/reference/android-sdk-reference) We would look forward to hear from you about any question or feedback at .