Skip to main content

React Native

Eppo's open source React Native SDK can be used for both feature flagging and experiment assignment:

1. Install the SDK

You can install the SDK with Yarn or NPM:

yarn add @eppo/react-native-sdk

2. Initialize the SDK

Initialize the SDK with a SDK key, which can be generated in the Eppo interface:

import { init } from "@eppo/react-native-sdk";

await init({
apiKey: "<API_KEY>",
assignmentLogger,
});

During initialization, the SDK sends an API request to Eppo to retrieve the most recent experiment configurations such as variation values and traffic allocation. The SDK stores these configurations in memory so that assignments are effectively instant. For more information, see the architecture overview page.

If you are using the SDK for experiment assignments, make sure to pass in an assignment logging callback (see section below).

Define an assignment logger (experiment assignment only)

If you are using the Eppo SDK for experiment assignment (i.e randomization), pass in a callback logging function to the init function on SDK initialization. The SDK invokes the callback to capture assignment data whenever a variation is assigned.

The code below illustrates an example implementation of a logging callback using Segment. You could also use your own logging system, the only requirement is that the SDK receives a logAssignment function. Here we define an implementation of the Eppo AssignmentLogger interface containing a single function named logAssignment:

import { IAssignmentLogger } from '@eppo/react-native-sdk';
import { createClient, AnalyticsProvider } from '@segment/analytics-react-native';
import { useAnalytics } from '@segment/analytics-react-native';

// Connect to Segment (or your own event-tracking system, it can be any system you like)
const segmentClient = createClient({
writeKey: 'SEGMENT_API_KEY'
});

const assignmentLogger: IAssignmentLogger = {
logAssignment(assignment) {
const { track } = useAnalytics();

track(
'Eppo Randomized Assignment',
{
userId: assignment.subject,
type: 'track',
properties: { ...assignment }
}
});
},
};

The SDK will invoke the logAssignment function with an assignment object that contains the following fields:

FieldDescriptionExample
experiment (string)An Eppo experiment key"recommendation-algo-allocation-17"
subject (string)An identifier of the subject or user assigned to the experiment variationUUID
variation (string)The experiment variation the subject was assigned to"control"
timestamp (string)The time when the subject was assigned to the variation2021-06-22T17:35:12.000Z
subjectAttributes (map)A free-form map of metadata about the subject. These attributes are only logged if passed to the SDK assignment function{ "country": "US" }
featureFlag (string)An Eppo feature flag key"recommendation-algo"
allocation (string)An Eppo allocation key"allocation-17"
note

More details about logging and examples (with Segment, Rudderstack, mParticle, and Snowplow) can be found in the event logging page.

Avoiding duplicated assignment logs

Eppo's SDK uses an internal cache to ensure that duplicate assignment events are not logged to the data warehouse. While Eppo's analytic engine will automatically deduplicate assignment records, this internal cache prevents firing unnecessary events and can help minimize costs associated with event logging.

3. Assign variations

Assigning users to flags or experiments with a single getStringAssignment function:

import * as EppoSdk from "@eppo/react-native-sdk";

const eppoClient = EppoSdk.getInstance();
const variation = eppoClient.getStringAssignment(
"<SUBJECT-KEY>",
"<FLAG-OR-EXPERIMENT-KEY>",
{
// Optional map of subject metadata for targeting.
}
);

The getStringAssignment function takes two required and one optional input to assign a variation:

  • subjectKey - The entity ID that is being experimented on, typically represented by a uuid.
  • flagOrExperimentKey - This key is available on the detail page for both flags and experiments.
  • subjectAttributes - An optional map of metadata about the subject used for targeting. If you create rules based on attributes on a flag/experiment, those attributes should be passed in on every assignment call.

Typed assignments

Additional functions are available:

getBoolAssignment(...)
getNumericAssignment(...)
getJSONStringAssignment(...)
getParsedJSONAssignment(...)

Handling null

We recommend always handling the null case in your code. Here are some examples illustrating when the SDK returns null:

  1. The Traffic Exposure setting on experiments/allocations determines the percentage of subjects the SDK will assign to that experiment/allocation. For example, if Traffic Exposure is 25%, the SDK will assign a variation for 25% of subjects and null for the remaining 75% (unless the subject is part of an allow list).

  2. Assignments occur within the environments of feature flags. You must enable the environment corresponding to the feature flag's allocation in the user interface before getStringAssignment returns variations. It will return null if the environment is not enabled.

Toggle to enable environment

  1. If getStringAssignment is invoked before the SDK has finished initializing, the SDK may not have access to the most recent experiment configurations. In this case, the SDK will assign a variation based on any previously downloaded experiment configurations stored in local storage, or return null if no configurations have been downloaded.

note

It may take up to 10 seconds for changes to Eppo experiments to be reflected by the SDK assignments.

Appendix

Usage in React

For usage in React, we recommend using the below EppoRandomizationProvider at the root of your component tree. By default, this component waits for initialization of the SDK before rendering its children. If waitForInitialization is set to false, the SDK getStringAssignment function will return null assignments while initializing and will only start assigning subjects when a new browser session is started.

import { useEffect, useState } from "react";

import { init } from "@eppo/react-native-sdk";

interface IEppoRandomizationProvider {
waitForInitialization?: boolean;
children: JSX.Element;
loadingComponent?: JSX.Element;
}

export default function EppoRandomizationProvider({
waitForInitialization = true,
children,
loadingComponent = <div>Loading...</div>,
}: IEppoRandomizationProvider): JSX.Element {
const [isInitialized, setIsInitialized] = useState(false);
useEffect(() => {
init({
apiKey: "<YOUR-API-KEY>",
assignmentLogger: {
logAssignment(assignment) {
// logging implementation
},
},
}).then(() => {
return setIsInitialized(true);
});
}, []);

if (!waitForInitialization || isInitialized) {
return children;
}
return loadingComponent;
}

After the SDK is initialized, you may assign variations from any child component of EppoRandomizationProvider. We recommend wrapping the SDK code in a useMemo hook to avoid invoking the assignment logic on every render:

<EppoRandomizationProvider>
<MyComponent />
</EppoRandomizationProvider>
function MyComponent(): JSX.Element {
const assignedVariation = useMemo(() => {
const eppoClient = getInstance();
return eppoClient.getStringAssignment("<SUBJECT-KEY>", "<EXPERIMENT-KEY>");
}, []);

return (
<div>
{assignedVariation === "<VARIATION-KEY>" && <p>Assigned control</p>}
</div>
);
}

Local Storage

The SDK uses @react-native-async-storage to store experiment configurations downloaded from Eppo. This makes lookup by the getStringAssignment function very fast. The configuration data stored contains the experiment key, experiment variation values, traffic allocation, and any allow-list overrides.