Skip to main content

Statsig in Expo

Note since the @statsig/expo-bindings works in conjuction with @statsig/react-bindings and @statsig/js-client, documentation on those packages is also relevant for Expo implementations:

Installation​

Statsig uses a multi-package strategy, so you will need to install both the Statsig client and the Expo specific bindings.

npx expo install @statsig/js-client @statsig/expo-bindings

Peer Dependecies​

The @statsig/expo-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.

npx expo install expo-device expo-application react-native-mmkv
npx expo prebuild

Expo Specific Setup​

The setup for an Expo environment is very similar to a plain React environment. The only difference is that you need to use the Expo specific StatsigProviderExpo. 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 {
  StatsigProviderExpo,
  useClientAsyncInit,
  useFeatureGate,
} from '@statsig/expo-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 (
    <StatsigProviderExpo client={client}>
      <Content />
    </StatsigProviderExpo>
  );
}

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.

Hooks​

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

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