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.

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
yarn add posthog-react-native @react-native-async-storage/async-storage react-native-device-info react-native-localize

# for iOS
cd ios && pod install
npm i -s posthog-react-native @react-native-async-storage/async-storage react-native-device-info react-native-localize

# for iOS
cd ios && pod install

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

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

Next steps

Recommended

Resource	Description
Capturing events	Learn how to capture custom events beyond autocapture
Identifying users	Associate events with specific users
Creating insights	Build trends, funnels, and retention charts
Group analytics	Track events at the company or account level

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