Skip to main content

Statsig in React Native

Note since the @statsig/react-native-bindings works in conjuction with @statsig/react-bindings and @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/js-client @statsig/react-native-bindings

Peer Dependecies​

The @statsig/react-native-bindings package has peer dependencies which will also need to be installed. react-native-mmkv is utilized to allow for synchronous storage, similar to LocalStorage in web environments.

npm install react-native-device-info react-native-mmkv

React Native Specific Setup​

The setup for a ReactNative environment is very similar to a plain React environment. The only difference is that you need to use the ReactNative specific StatsigProviderRN. This automatically switches out the storage layer used by the SDK, utilizing react-native-mmkv instead of LocalStorage (which isn't available in RN environments).

import {
  StatsigProviderRN,
  useOnDeviceClientAsyncInit,
  useFeatureGate,
} from '@statsig/react-native-bindings';

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

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

function App() {
  const { client, isLoading } = useOnDeviceClientAsyncInit(YOUR_CLIENT_KEY);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <StatsigProviderRN client={client}>
      <Content />
    </StatsigProviderRN>
  );
}

React Hooks​

useGateValue or useFeatureGate​

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

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

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

useDynamicConfig​

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

function MyComponent() {
  const config = useDynamicConfig('a_config', { user: {userID: "123"}}); // <-- 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';

function MyComponent() {
  const experiment = useExperiment('an_experiment', { user: {userID: "123"}}); // <-- 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';

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

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