ReactSDKClient for the React Native SDK

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 Feature Experimentation. 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 below. 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 wish 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 Feature Experimentation 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 Feature Experimentation decision context
• getForcedDecision(decisionContext: optimizely.OptimizelyDecisionContext): optimizely.OptimizelyForcedDecision | null Returns the forced decision for specified Optimizely Feature Experimentation decision context
• removeForcedDecision(decisionContext: optimizely.OptimizelyDecisionContext): boolean Removes the forced decision for specified Optimizely Feature Experimentation 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.