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 valueif (gateValue) {  // }
import { useFeatureGate } from '@statsig/react-native-bindings-on-device-eval';const gate = useFeatureGate('a_gate', { userID: "a-user" }); // <-- Returns the FeatureGate objectif (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>;}