ReactSDKClient for the React Native SDK

6 min

ReactSDKClient is a wrapper that lets you access the standard SDK methods, such as the Decide method, if you do not want to use React components or hooks (such as useDecision) to interact with Optimizely. Unlike other SDKs, you do not need to provide user information to the methods every time you call them, as long as you pass user information at instantiation. The following section describes the methods that ReactSDKClient provides.

Version

SDK v2.2.0

Description

An instance of the ReactSDKClient is created with createInstance and it is also passed down to child components in the optimizely prop with the withOptimizely higher-order component.

The ReactSDKClient provides the following API interface. Note that if the instance was provided by withOptimizely or if setUser was called, then you do not need to pass in userId or attributes arguments when calling methods of the optimizely client object, unless you want to use different userId or attributes than those given to OptimizelyProvider or setUser.

APIs Provided

onReady(opts?: { timeout?: number }): Promise Returns a Promise that fulfills with an object representing the datafile fetch process. See JavaScript: onReady

user: User The current user associated with this client instance

setUser(userInfo: User): void Call this to update the current user

onUserUpdate(handler: (userInfo: User) => void): () => void Subscribe a callback to be called when this instance's current user changes. Returns a function that will unsubscribe the callback.

decide(key: string, options?: optimizely.OptimizelyDecideOption[], overrideUserId?: string, overrideAttributes?: optimizely.UserAttributes): OptimizelyDecision Returns a decision result for a flag key for a user. The decision result is returned in an OptimizelyDecision object, and contains all data required to deliver the flag rule.

decideAll(options?: optimizely.OptimizelyDecideOption[], overrideUserId?: string, overrideAttributes?: optimizely.UserAttributes): { [key: string]: OptimizelyDecision } Returns decisions for all active (unarchived) flags for a user.

decideForKeys(keys: string[], options?: optimizely.OptimizelyDecideOption[], overrideUserId?: string, overrideAttributes?: optimizely.UserAttributes): { [key: string]: OptimizelyDecision } Returns an object of decision results mapped by flag keys.

activate(experimentKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): string | null Activate an experiment, and return the variation for the given user.

getVariation(experimentKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): string | null Return the variation for the given experiment and user.

getFeatureVariables(featureKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): VariableValuesObject: Decide and return variable values for the given flag and user

getFeatureVariableString(featureKey: string, variableKey: string, overrideUserId?: string, overrideAttributes?: optimizely.UserAttributes): string | null: Decide and return the variable value for the given feature, variable, and user

getFeatureVariableInteger(featureKey: string, variableKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): number | null Decide and return the variable value for the given feature, variable, and user

getFeatureVariableBoolean(featureKey: string, variableKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): boolean | null Decide and return the variable value for the given feature, variable, and user

getFeatureVariableDouble(featureKey: string, variableKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): number | null Decide and return the variable value for the given feature, variable, and user

isFeatureEnabled(featureKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): boolean Return the enabled status for the given flag and user

getEnabledFeatures(overrideUserId?: string, overrideAttributes?: UserAttributes): Array<string>: Return the keys of all features enabled for the given user

track(eventKey: string, overrideUserId?: string | EventTags, overrideAttributes?: UserAttributes, eventTags?: EventTags): void Track an event to the Optimizely results backend

setForcedVariation(experiment: string, overrideUserIdOrVariationKey: string, variationKey?: string | null): boolean Set a forced variation for the given experiment, variation, and user

getForcedVariation(experiment: string, overrideUserId?: string): string | null Get the forced variation for the given experiment, variation, and user

setForcedDecision(decisionContext: optimizely.OptimizelyDecisionContext, decision: optimizely.OptimizelyForcedDecision): void Sets the forced decision for specified Optimizely decision context

getForcedDecision(decisionContext: optimizely.OptimizelyDecisionContext): optimizely.OptimizelyForcedDecision | null Returns the forced decision for specified Optimizely decision context

removeForcedDecision(decisionContext: optimizely.OptimizelyDecisionContext): boolean Removes the forced decision for specified Optimizely decision context

removeAllForcedDecisions(): boolean Removes all the forced decisions

Example

Example of getting an instance of ReactSDKClient with withOptimizely to use the track API:

import React from 'react';
import { Button } from 'react-native';
import { withOptimizely } from '@optimizely/react-sdk'

class SignupButton extends React.Component {
  onPress = () => {
    // optimizely is an instance of ReactSDKClient provided by withOptimizely
    const { optimizely } = this.props
    
    // track API provided by the ReactSDKClient instance
    // Notice, no userId or attributes are necessary since 
    // optimizely has been provided by withOptimizely
    optimizely.track('signup-clicked')
    
    // rest of click handler
  }

  render() {
    <Button onPress={this.onPress}>
      Signup
    </Button>
  }
}

const WrappedSignupButton = withOptimizely(SignupButton)

Example of getting an instance of ReactSDKClient from createInstance:

import React from 'react';
import { View, Button } from 'react-native';
import {
  createInstance,
  OptimizelyProvider,
} from '@optimizely/react-sdk'

const optimizely = createInstance({
  sdkKey: 'CxpSJttFVpz8LiLg8jnZwq',
})

optimizely.setUser({
  id: 'user123',
  attributes: {
    device: 'iPhone',
    lifetime: 24738388,
    is_logged_in: true,
  }
});

optimizely.track('Application Loaded')

function App() {
  return (
    <OptimizelyProvider optimizely={optimizely}>
      <View>
    		<Text>Application</Text>
			</View>
    </OptimizelyProvider>
  );
}

export default App;

Typescript Types

The following type definitions are used in the ReactSDKClient interface:

UserAttributes : { [name: string]: any }

User : { id: string | null, attributes: userAttributes }

VariableValuesObject : { [key: string]: boolean | number | string | null }

EventTags : { [key: string]: string | number | boolean; }

Source

The language and platform source files containing the implementation for the React Native SDK are available on GitHub.