Skip to main content

Statsig in React Native

Installation​

To add support for React Native, first, add the Statsig JS client outlined here.

Once the Statsig client is installed, you can add the React Native bindings as described below:

npm install @statsig/js-client @statsig/react-native-bindings

Peer Dependecies​

The @statsig/react-native-bindings module has peer dependencies which will also need to be installed

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

React Native Specific Setup​

Create a Client​

Creating a Statsig client when using React Native has a slight twist when compared to pure JavaScript environments.

Because storage in React Native is async (See AsyncStorage), a warming step is required to load any cache values from disk. This warming performs some AsyncStorage.getItem operations that block the StatsigProviderRN from rendering.

...

Render the StatsigProvider​

Once the Statsig client is created and the warming step started, we can then pass them into the StatsigProviderRN component for rendering.

export function App(): JSX.Element {
  return (
    <StatsigProviderRN client={myStatsigClient} cacheWarming={warming}>
      {/* Render your App */}
    </StatsigProviderRN>
  );
}

Hooks​

All hooks are re-exported from the @statsig/react-bindings package (See Hooks). They can be imported through @statsig/react-native-bindings or directly through the @statsig/react-bindings peer dependency.

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