React Native Feature Flags installation

Install with the wizard

Run this command in your project directory to add PostHog to your React Native project. The wizard detects your framework, installs the SDK, and sets up your first events.

Learn more

Or set it up manually by following the rest of this guide.

  1. Install the package

    Required

    Install the PostHog React Native library and its dependencies:

    npx expo install posthog-react-native expo-file-system expo-application expo-device expo-localization

  2. Configure PostHog

    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={{
                    host: "https://us.i.posthog.com",
                }}
            >
                <RestOfApp />
            </PostHogProvider>
        )
    }

  3. Send events

    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 = () => {
            posthog.capture('button_pressed', {
                button_name: 'signup'
            })
        }
    

        return <Button onPress={handlePress} title="Sign Up" />
    }

  4. Use feature flags

    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.isFeatureEnabled('flag-key')
    

        if (isMyFlagEnabled) {
            // Do something differently for this user
            // Optional: fetch the payload
            const matchedFlagPayload = posthog.getFeatureFlagResult('flag-key')?.payload
        }
    

        return <View>...</View>
    }

    Multivariate flags

    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>
    }

  5. Running experiments

    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. Next steps

    Recommended

    Now that you're evaluating flags, continue with the resources below to learn what else Feature Flags enables within the PostHog platform.

    ResourceDescription
    Creating a feature flagHow to create a feature flag in PostHog
    Adding feature flag codeHow to check flags in your code for all platforms
    Framework-specific guidesSetup guides for React Native, Next.js, Flutter, and other frameworks
    How to do a phased rolloutGradually roll out features to minimize risk
    More tutorialsOther real-world examples and use cases

Still have questions?

Was this page useful?