Experiment React Native SDK (Legacy)

Official documentation for Amplitude Experiment's Client-side React Native SDK.

Install

Install the Experiment JavaScript Client SDK.

npm install --save @amplitude/experiment-react-native-client

// (1) Initialize the experiment client
await Experiment.initialize('<DEPLOYMENT_KEY>');

// (2) Fetch variants for a user
const user = {
    user_id: 'user@company.com',
    device_id: 'abcdefg',
    user_properties: {
        'premium': true,
    },
};
await Experiment.fetch(user);

// (3) Lookup a flag's variant
const variant = await Experiment.variant('<FLAG_KEY>');
if (variant.value === 'on') {
    // Flag is on
} else {
    // Flag is off
}

Core functions

The following functions make up the core of the Experiment client-side SDK.

Initialize

Initialize the SDK client in your application on startup. The deployment key argument you pass to the apiKey parameter must live within the same project that you are sending analytics events to.

initialize(apiKey: string, config?: ExperimentConfig): Promise<boolean>

The initializer returns a singleton instance, so subsequent initializations for the same instance name always return the initial instance. To create multiple instances, use the instanceName configuration.

const experiment = await Experiment.initialize('<DEPLOYMENT_KEY>');

Integrations

If you use either Amplitude or Segment Analytics SDKs to track events into Amplitude, you'll want to set up an integration on initialization. Integrations automatically implement provider interfaces to enable a more streamlined developer experience by making it easier to manage user identity and track exposures events.

await Amplitude.getInstance().init('<API_KEY>');
await Experiment.initializeWithAmplitudeAnalytics('<DEPLOYMENT_KEY>');

Configuration

Configure the SDK client during initialization.

Fetch

Fetches variants for a user and stores the results in the client for fast access. The function remote evaluates the user for flags associated with the deployment used to initialize the SDK client.

fetch(user?: ExperimentUser): Promise<boolean>

Amplitude recommends calling fetch() during application start up so that the user gets the most up-to-date variants for the application session. Furthermore, you'll need to wait for the fetch request to return a result before rendering the user experience to avoid the interface "flickering".

const user = {
    user_id: 'user@company.com',
    device_id: 'abcdefg',
    user_properties: {
        'premium': true,
    },
};
await Experiment.fetch(user);

If you're using an integration or a custom user provider then you can fetch without inputting the user.

await Experiment.fetch();

Variant

Access a variant for a flag or experiment from the SDK client's local store.

variant(key: string): Promise<Variant>

variantWithFallback(key: string, fallback: Variant): Promise<Variant>

When determining which variant a user has been bucketed into, you'll want to compare the variant value to a well-known string.

const variant = await Experiment.variant('<FLAG_KEY>');
if (variant.value === 'on') {
    // Flag is on
} else {
    // Flag is off
}

const variant = await Experiment.variant('<FLAG_KEY>');
if (variant.value === 'on') {
    const payload = variant.payload;
}

A null variant value means that the user hasn't been bucketed into a variant. You may use the built in fallback parameter to provide a variant to return if the store doesn't contain a variant for the given flag key.

const variant = await Experiment.variantWithFallback('<FLAG_KEY>', { value: 'control' });
if (variant === 'control') {
    // Control
} else if (variant === 'treatment') {
    // Treatment
}

All

Access all variants stored by the SDK client.

all(): Promise<Variants>

Exposure

Manually track an exposure event for the current variant of the given flag key through configured integration or custom exposure tracking provider. Generally used in conjunction with setting the automaticExposureTracking configuration optional to false.

exposure(key: string): Promise<boolean>

const variant = await Experiment.variant('<FLAG_KEY>');

// Do other things...

await Experiment.exposure('<FLAG_KEY>');
if (variant === 'control') {
    // Control
} else if (variant === 'treatment') {
    // Treatment
}