Statsig in Expo
Supported Features
Installation
To use Statsig in Expo, you will need to install the Statsig Expo specific bindings.
npx expo install @statsig/expo-bindings
Peer Dependencies
The @statsig/expo-bindings
package has peer dependencies which may also need to be installed if they are not already in your project.
npx expo install expo-device expo-application @react-native-async-storage/async-storage
Expo + React 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 AsyncStorage instead of LocalStorage (which isn't available in RN environments).
import {
StatsigProviderExpo,
useFeatureGate,
} from '@statsig/expo-bindings';
function Content() {
const gate = useFeatureGate('a_gate');
return <Text>Reason: {gate.details.reason}</Text>; // Reason: Network or NetworkNotModified
}
function App() {
return (
<StatsigProviderExpo
sdkKey={YOUR_CLIENT_KEY}
user={{userID: 'a-user'}}
options={{ environment: { tier: 'development' } }} // (Optional)
loadingComponent={<Text>Loading...</Text>}>
<Content />
</StatsigProviderExpo>
);
}
The Basics
You can get an instance of the StatsigClient to check gates, experiments, dynamic configs, layers, and log events.
import { useStatsigClient } from "@statsig/react-native-expo-bindings";
const { client } = useStatsigClient();
See the methods you can call on the client below.
Checking a Feature Flag/Gate
You can evaluate a gate by getting the client with the useStatsigClient
hook,
and then calling checkGate
const { client } = useStatsigClient();
return (
<div>Gate is {client.checkGate('check_user') ? 'passing' : 'failing'}.</div>
);
Getting a DynamicConfig
You can get a DynamicConfig value by getting the client with the useStatsigClient
hook,
and then calling getConfig
const { client } = useStatsigClient();
const config = client.getConfig('app_properties');
return (
<div>{config.get('title', 'Default Title')}</div>
);
Logging an Event
You can get the client with the useStatsigClient
hook, and then call logEvent
const { client } = useStatsigClient();
return <button onClick={() => client.logEvent("button_click")}>Click Me</button>
Getting an Experiment
You can access the experiment variant and parameters for the user by getting the client with the useStatsigClient
hook,
and then calling getExperiment
.
const { client } = useStatsigClient();
const experiment = client.getExperiment('headline_test');
return (
<div>Headline Parameter: {experiment.get('headline', 'Default')}.</div>
);
Getting a Layer
You can access layers and layer parameters for the user by getting the client with the useStatsigClient
hook,
and then calling getLayer
.
const { client } = useStatsigClient();
const layer = client.getLayer('homepage_layer');
return (
<div>Headline Parameter: {layer.get('hero_text', 'Welcome')}.</div>
);
Advanced
Expo Without React
In some scenarios, you may need to use the StatsigClient
when you are not in the React component tree. Things like background tasks or handling notifications.
For these, you can use the Expo specific StatsigClientExpo
.
import { StatsigClientExpo } from '@statsig/expo-bindings';
const myClient = new StatsigClientExpo(
YOUR_CLIENT_KEY,
{ userID: "a-user" }
);
await myClient.initializeAsync();
if (myClient.checkGate("my_gate")) {
// do something cool
}
Synchronous Storage with MMKV
If you are utilizing MMKV in your project, and would prefer to use that instead of the default (AsyncStorage).
You can provide you own StorageProvider
via StatsigOptions
.
Something like:
import { MMKV } from "react-native-mmkv";
import { StorageProvider } from "@statsig/client-core";
import { StatsigProviderExpo } from "@statsig/expo-bindings";
function App() {
const [storageProvider] = useState<StorageProvider>(() => {
const mmkv = new MMKV();
return {
isReady: () => true,
isReadyResolver: () => null,
getProviderName: () => "MMKV",
getAllKeys: () => mmkv.getAllKeys(),
getItem: (key: string) => mmkv.getString(key) ?? null,
setItem: (key: string, value: string) => mmkv.set(key, value),
removeItem: (key: string) => mmkv.delete(key),
};
});
return (
<StatsigProviderExpo
sdkKey={YOUR_CLIENT_KEY}
user={{ userID: "a-user" }}
options={{
storageProvider, // <- Passed into StatsigOptions
}}
>
<Text>...</Text>
</StatsigProviderExpo>
);
}