Skip to main content

Statsig in React Native

Note since the @statsig/react-native-bindings-on-device-eval works in conjunction 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 Dependencies

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>;
}