Skip to main content

Statsig in React Native

Note since the @statsig/react-native-bindings-on-device-eval works in conjuction with @statsig/js-on-device-eval-client, documentation on those packages is also relevant for React Native implementations:

Installation​

Statsig uses a multi-package strategy, so you will need to install both the Statsig client and the React Native specific bindings.

npm install @statsig/react-native-bindings-on-device-eval

Peer Dependecies​

The @statsig/react-native-bindings-on-device-eval package has peer dependencies which may also need to be installed if they are not already in your project.

npm install @react-native-async-storage/async-storage

React Native Specific Setup​

To get setup with Statsig in a ReactNative component tree, you should use the RN specific StatsigProviderOnDeviceEvalRN. This automatically switches out the storage layer used by the SDK, utilizing AsyncStorage instead of LocalStorage (which isn't available in RN environments).

import {
  StatsigProviderOnDeviceEvalRN,
  useFeatureGate,
} from '@statsig/react-native-bindings-on-device-eval';

function Content() {
  const gate = useFeatureGate('a_gate');

  return <div>Reason: {gate.details.reason}</div>; // Reason: Network or NetworkNotModified
}

function App() {
  return (
    <StatsigProviderOnDeviceEvalRN
      sdkKey={YOUR_CLIENT_KEY}
      loadingComponent={<Text>...</Text>}
    >
      <Content />
    </StatsigProviderOnDeviceEvalRN>
  );
}

React Hooks​

useGateValue or useFeatureGate​

import { useGateValue } from '@statsig/react-native-bindings-on-device-eval';

const gateValue = useGateValue('a_gate', { userID: "a-user" }); // <-- Returns the boolean value
if (gateValue) {
  // 
}
import { useFeatureGate } from '@statsig/react-native-bindings-on-device-eval';

const gate = useFeatureGate('a_gate', { userID: "a-user" }); // <-- Returns the FeatureGate object
if (gate.value) {
  // 
}

useDynamicConfig​

import { useDynamicConfig } from '@statsig/react-native-bindings-on-device-eval';

function MyComponent() {
  const config = useDynamicConfig('a_config', { userID: 'a-user' }); // <-- Returns the DynamicConfig object
  const bgColor = config.value['bg_color'] as string;

  return <View style={{backgroundColor: bgColor}}></View>;
}

useExperiment​

import { useExperiment } from '@statsig/react-native-bindings-on-device-eval';

function MyComponent() {
  const experiment = useExperiment('an_experiment', { userID: 'a-user' }); // <-- Returns the Experiment object
  const bgColor = experiment.value['bg_color'] as string;

  return <View style={{backgroundColor: bgColor}}></View>;
}

useLayer​

import { useLayer } from '@statsig/react-native-bindings-on-device-eval';

function MyComponent() {
  const layer = useLayer('a_layer', { userID: 'a-user' }); // <-- Returns the Layer object
  const bgColor = layer.getValue('bg_color') as string;

  return <View style={{backgroundColor: bgColor}}></View>;
}