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
- Yarn
npm install @statsig/react-native-bindings-on-device-eval
yarn add @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
- Yarn
npm install @react-native-async-storage/async-storage
yarn add @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>;}