Setting the file. One moment.
Skill 77 · Instrument Feature Flags
Subchapter 77.19
references/react-native.mdMarkdown4 KBView on GitHub
AI agents: this is one page from PostHog’s docs. Full index of Markdown docs for LLMs: https://posthog.com/llms.txt (opens in a new tab)
1
Required
Install the PostHog React Native library and its dependencies:
npx expo install posthog-react-native expo-file-system expo-application expo-device expo-localizationyarn add posthog-react-native @react-native-async-storage/async-storage react-native-device-info react-native-localize
# for iOS
cd ios && pod installnpm i -s posthog-react-native @react-native-async-storage/async-storage react-native-device-info react-native-localize
# for iOS
cd ios && pod install2
Required
PostHog is most easily used via the PostHogProvider component. Wrap your app with the provider:
App.tsx
import { PostHogProvider } from 'posthog-react-native'
export function MyApp() {
return (
<PostHogProvider
apiKey="<ph_project_token>"
options={
3
Recommended
Once installed, PostHog will automatically start capturing events. You can also manually send events using the usePostHog hook:
Component.tsx
import { usePostHog } from 'posthog-react-native'
function MyComponent() {
const posthog = usePostHog()
const handlePress = () => {
4
Required
PostHog provides hooks to make it easy to use feature flags in your React Native app. Use useFeatureFlagEnabled for boolean flags:
Component.tsx
import { usePostHog } from 'posthog-react-native'
function MyComponent() {
const posthog = usePostHog()
const isMyFlagEnabled = posthog.
5
Optional
Experiments run on top of our feature flags. Once you’ve implemented the flag in your code, you run an experiment by creating a new experiment in the PostHog dashboard.
6
Recommended
Now that you’re evaluating flags, continue with the resources below to learn what else Feature Flags enables within the PostHog platform.
| Resource | Description |
|---|---|
| Creating a feature flag (opens in a new tab) | How to create a feature flag in PostHog |
| Adding feature flag code (opens in a new tab) | How to check flags in your code for all platforms |
| Framework-specific guides |
Ask PostHog AI
HelpfulCould be better
For multivariate flags, use getFeatureFlag:
Component.tsx
import { usePostHog } from 'posthog-react-native'
function MyComponent() {
const posthog = usePostHog()
const enabledVariant = posthog.getFeatureFlag('flag-key')
if (enabledVariant === 'variant-key') { // replace 'variant-key' with the key of your variant
// Do something differently for this user
// Optional: fetch the payload
const matchedFlagPayload = posthog.getFeatureFlagResult('flag-key')?.payload
}
return <View>...</View>
}| Setup guides for React Native, Next.js, Flutter, and other frameworks |
| How to do a phased rollout (opens in a new tab) | Gradually roll out features to minimize risk |
| More tutorials (opens in a new tab) | Other real-world examples and use cases |