React Native

If you develop your mobile and/or OTT apps using React Native, our React Native SDK allows you to run experiments and manage feature releases directly in JavaScript.

At this time, the React Native SDK supports programmatic experimentation (Dynamic Variables and Code Blocks), but does not allow you to make visual changes using the Visual Editor like you can using our Android and iOS SDKs.

EU Cloud Site

Use the configAttributes flag to set your Apptimize region to EUCS if you are integrated in our EU Cloud site.

React Native

globals.apptimize = {
    'appKey': '<YOUR_APP_KEY>',
    'configAttributes': {
        'apptimize_region': 'eucs',
    }
};

Apptimize.setup(globals.apptimize.appKey, globals.apptimize.configAttributes);

SDK Installation

Sign in to the Apptimize dashboard. You’ll see a welcome page that asks for the name of your app. After entering all your info, you’ll see these installation instructions again.

Install the SDK from the command-line with npm i @apptimize/apptimize-client-sdk

Then, include Apptimize in your app. For example, you can use import:

React Native

import Apptimize from '@apptimize/apptimize-client-sdk';

You should now have access to all Apptimize APIs.

You can find our latest React Native API Documentation here.

Our package can be found on npm here.

Initializing Apptimize

To initialize Apptimize, call the setup() method with the App Key associated with your app, which can be found in the Install tab of your Dashboard.

Synchronous and Asynchronous Loading

To ensure the best experience for your end users, we recommend waiting to display page content until Apptimize has been fully loaded and initialized. This will prevent potential issues with users seeing multiple variants (“flickering” of visual elements) and will prevent situations where an outsized percentage of users are placed in the baseline variant because the experiment data hasn’t been fully received and processed by the SDK.

The sample code below shows how to use setOnApptimizeInitializedCallback() to determine when Apptimize setup and initialization is complete.

React Native

// Create a function that will be executed whenever new Apptimize metadata is downloaded
function onApptimizeInitialized(){
    console.log("Apptimize setup and initialization complete");
    Apptimize.track("Apptimize Initialized");
    // Set a flag to indicate Apptimize data is available and content can be displayed
}

Apptimize.setOnApptimizeInitializedCallback(onApptimizeInitialized);
Apptimize.setup("<appkey>");

Data Storage

Since there are several available options for persisting data in React Native, we have added a configurable option to configAttributes in the setup() method to select which storage method you would prefer. You can set the react_native_storage option by passing the AsyncStorage object used by your application as the value. By default core AsyncStorage will be used, though that feature has been deprecated and soon this will be a required parameter.

For example, you can use react-native-community AsyncStorage to replace core AsyncStorage:

React Native

import AsyncStorage from '@react-native-community/async-storage';

...

var apptimizeOptions = {
    'react_native_storage': AsyncStorage,
};

Apptimize.setup("<appkey>", apptimizeOptions);

Note that this option is compatible with core AsyncStorage and community AsyncStorage v1. A custom object can be passed in, as long as it implements the methods getItem, setItem, and removeItem and all three match the behavior of core AsyncStorage.