React Native product analytics installation

Our React Native library enables you to integrate PostHog with your React Native project. For Expo projects, there are no mobile native dependencies outside of supported Expo packages.

  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_api_key>"
                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.getFeatureFlagPayload('flag-key')
        }
    

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

        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.

React Native Web and macOS

If you're using React Native Web or React Native macOS, don't use expo-file-system since Web and macOS targets aren't supported. Use @react-native-async-storage/async-storage instead.

Without the PostHogProvider

If you prefer not to use the provider, initialize PostHog in its own file and import the instance:

posthog.ts
import PostHog from 'posthog-react-native'


export const posthog = new PostHog('<ph_project_api_key>', {
  host: 'https://us.i.posthog.com' // usually 'https://us.i.posthog.com' or 'https://eu.i.posthog.com'
})

Then access PostHog by importing your instance:

React Native
import { posthog } from './posthog'


export function MyApp() {
    useEffect(() => {
        posthog.capture('event_name')
    }, [])


    return <View>Your app code</View>
}

You can also use this instance with the PostHogProvider:

React Native
import { posthog } from './posthog'


export function MyApp() {
  return <PostHogProvider client={posthog}>{/* Your app code */}</PostHogProvider>
}

Community questions

Was this page useful?

Questions about this page? or post a community question.