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-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
Older versions (1.x.x) used async storage
warning

This is Deprecated

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

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

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,
  useClientAsyncInit,
  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 } = useClientAsyncInit(YOUR_CLIENT_KEY, {
    userID: 'a-user',
  });

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

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

Note: There are a few different ways to initialize the StatsigClient, with trade-offs between latency and up-to-date values. You can read Initialization Strategies to learn more.

Android networking​

We have seen reports that the default networking client on react native for android can error out with:

ERROR  [Statsig] A networking error occured during POST request to https://featureassets.org/v1/initialize

Please let us know if you hit this, but for now the suggested workaround is to append this content-type for all requests:

const customFetcher = (uri, args) => {
  args.headers = {
    'Content-Type': 'application/json',
    ...args.headers,
  };
  return fetch(uri, args);
};

const myStatsigClient = new StatsigClient(
  'YOUR_KEY',
  {
    userID: "YOUR_USER_ID",
  },
  {
    networkConfig: {
      networkOverrideFunc: customFetcher,
    },
  }
);

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