React Native

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
# or
npm i -s posthog-react-native @react-native-async-storage/async-storage react-native-device-info

// App.(js|ts)
import { usePostHog, PostHogProvider } from 'posthog-react-native'
...

export function MyApp() {
    return (
        <PostHogProvider apiKey="<ph_project_api_key>" options={{
            // usually 'https://us.i.posthog.com' or 'https://eu.i.posthog.com'
            host: https://us.i.posthog.com, 
        }}>
            <MyComponent />
        </PostHogProvider>
    )
}

// Now you can simply access PostHog elsewhere in the app like so:

const MyComponent = () => {
    const posthog = usePostHog()

    useEffect(() => {
        posthog.capture("mycomponent_loaded", { foo: "bar" })
    }, [])
}

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

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


// app.ts
import { posthog } from './posthog'

export function MyApp1() {
    useEffect(async () => {
        posthog.capture('myapp1_loaded')
    }, [])

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


// You can even use this instance with the PostHogProvider
export function MyApp2() {
  return <PostHogProvider client={posthog}>{/* Your app code */}</PostHogProvider>
}

export const posthog = new PostHog("<ph_project_api_key>", {
    /** PostHog API host (usually 'https://us.i.posthog.com' by default or 'https://eu.i.posthog.com') */
    host?: string, 
    /** The number of events to queue before sending to PostHog (flushing) */
    flushAt?: number = 20,
    /** The interval in milliseconds between periodic flushes */
    flushInterval?: number = 10000,
    /** The maximum number of queued messages to be flushed as part of a single batch (must be higher than 'flushAt'). */
    maxBatchSize?: number = 100,
    /** The maximum number of cached messages either in memory or on the local storage (must be higher than 'flushAt'). */
    maxQueueSize?: number = 1000,
    /** If set to true the SDK is essentially disabled (useful for local environments where you don't want to track anything) */
    disabled?: boolean,
    /** If set to false the SDK will not track until the 'optIn' function is called. */
    defaultOptIn?: boolean = true,
    /** Whether to track that 'getFeatureFlag' was called (used by Experiments) */
    sendFeatureFlagEvent?: boolean = true,
    /** Whether to load feature flags when initialized or not */
    preloadFeatureFlags?: boolean = true,
    /** Option to bootstrap the library with given distinctId and feature flags */
    bootstrap?: {
        distinctId?: string
        isIdentifiedId?: boolean
        featureFlags?: Record<string, boolean | string>
        featureFlagPayloads?: Record<string, JsonType>
    },
    /** How many times we will retry HTTP requests */
    fetchRetryCount?: number = 3,
    /** The delay between HTTP request retries */
    fetchRetryDelay?: number = 3000,
    /** Timeout in milliseconds for any calls. Defaults to 10 seconds. */
    requestTimeout?: number = 10000,
    /** Timeout in milliseconds for feature flag calls. Defaults to 10 seconds. */
    featureFlagsRequestTimeoutMs?: number = 10000,
    /** For Session Analysis how long before we expire a session (defaults to 30 mins) */
    sessionExpirationTimeSeconds?: number = 1800,
    /** Whether to post events to PostHog in JSON or compressed format. Defaults to 'form' */
    captureMode?: 'json' | 'form',
    /** Allows you to provide the storage type. By default 'file'.
     * 'file' will try to load the best available storage, the provided 'customStorage', 'customAsyncStorage' or in-memory storage.
     */
    persistence?: 'memory' | 'file',
    /** Allows you to provide your own implementation of the common information about your App or a function to modify the default App properties generated */
    customAppProperties?:
      | PostHogCustomAppProperties
      | ((properties: PostHogCustomAppProperties) => PostHogCustomAppProperties),
    /** Allows you to provide a custom asynchronous storage such as async-storage, expo-file-system or a synchronous storage such as mmkv.
     * If not provided, PostHog will attempt to use the best available storage via optional peer dependencies (async-storage, expo-file-system).
     * If 'persistence' is set to 'memory', this option will be ignored.
     */
    customStorage?: PostHogCustomStorage,
    /** Captures native app lifecycle events such as Application Installed, Application Updated, Application Opened, Application Became Active and Application Backgrounded.
     * By default is false.
     * If you're already using the 'captureLifecycleEvents' options with 'initReactNativeNavigation' or 'PostHogProvider, you should not set this to true, otherwise you may see duplicated events.
     */
    captureNativeAppLifecycleEvents?: boolean = false,
    /** When true, disables automatic GeoIP resolution for events and feature flags. Defaults to false */
    disableGeoip?: = false
})

posthog.capture('user_signed_up')

posthog.capture('user_signed_up', {
    login_type: "email",
    is_free_trial: true
})

<View ph-label="my-special-label"></View>

<View ph-no-capture>Sensitive view here</View>

// App.(js|ts)

import { PostHogProvider } from 'posthog-react-native'
import { NavigationContainer } from '@react-navigation/native'

export function App() {
    return (
        <NavigationContainer>
            <PostHogProvider apiKey="<ph_project_api_key>" autocapture>
                {/* Rest of app */}
            </PostHogProvider>
        </NavigationContainer>
    )
}

import PostHog, { PostHogProvider } from 'posthog-react-native'
import { Navigation } from 'react-native-navigation';

export const posthog = new PostHog('<ph_project_api_key>');

// Simplify the wrapping of your Screens with a shared PostHogProvider
export const SharedPostHogProvider = (props: any) => {
  return (
    <PostHogProvider client={posthog} autocapture={{
      captureLifecycleEvents: false,  // Lifecycle events are handled differently for react-native-navigation
      captureTouches: true,
    }}>
      {props.children}
    </PostHogProvider>
  );
};

export const MyScreen = () => {
  return (
    // Every screen needs to be wrapped with this provider if you want to capture touches or use the hook `usePostHog()` 
    <SharedPostHogProvider>
      <View>
        ...
      </View>
    </SharedPostHogProvider>
  );
};

Navigation.registerComponent('Screen', () => MyScreen);

Navigation.events().registerAppLaunchedListener(async () => {
  posthog.initReactNativeNavigation({
    navigation: {
      // (Optional) Set the name based on the route. Defaults to the route name.
      routeToName: (name, properties) => name,
      // (Optional) Tracks all passProps as properties. Defaults to undefined
      routeToProperties: (name, properties) => properties,
    },
  });
});

<PostHogProvider apiKey="<ph_project_api_key>" autocapture={{
    captureTouches: true, // If you don't want to capture touch events set this to false
    captureLifecycleEvents: true, // If you don't want to capture the Lifecycle Events (e.g. Application Opened) set this to false
    captureScreens: true, // If you don't want to capture screen events set this to false
    ignoreLabels: [], // Any labels here will be ignored from the stack in touch events
    customLabelProp: "ph-label",
    noCaptureProp: "ph-no-capture",
    propsToCapture = ["testID"], // Limit which props are captured. By default, identifiers and text content are captured.

    navigation: {
        // By default only the Screen name is tracked but it is possible to track the
        // params or modify the name by intercepting theautocapture like so
        routeToName: (name, params) => {
            if (params.id) return `${name}/${params.id}`
            return name
        },
        routeToParams: (name, params) => {
            if (name === "SensitiveScreen") return undefined
            return params
        },
    }
}}>
    ...
</PostHogProvider>

posthog.screen('dashboard', {
    background: 'blue',
    hero: 'superhog',
})

posthog.identify('distinctID', 
  { // userProperties:
      email: 'user@posthog.com',
      name: 'My Name'
  },
  { // userPropertiesSetOnce:
      date_of_first_log_in: '2024-03-01'
  }
)

posthog.capture('some_event', { $set: { userProperty: 'value' } })

posthog.capture('some_event', { $set_once: { userProperty: 'value' } })

posthog.register({
    'icecream pref': 'vanilla',
    team_id: 22,
})

posthog.unregister('icecream pref'),

await posthog.flush()

posthog.reset()

posthog.optedOut() // See if a user has opted out
posthog.optIn() // opt in
posthog.optOut() // opt out

import { useFeatureFlag } from 'posthog-react-native'

const MyComponent = () => {
    const booleanFlag = useFeatureFlag('key-for-your-boolean-flag')

    if (showFlaggedFeature === undefined) {
        // the response is undefined if the flags are being loaded
        return null
    }

    // Optional use the 'useFeatureFlagWithPayload' hook for fetching the feature flag payload

    return showFlaggedFeature ? <Text>Testing feature 😄</Text> : <Text>Not Testing feature 😢</Text>
}

import { useFeatureFlag } from 'posthog-react-native'

const MyComponent = () => {
    const multiVariantFeature = useFeatureFlag('key-for-your-multivariate-flag')

    if (multiVariantFeature === undefined) {
        // the response is undefined if the flags are being loaded
        return null
    } else if (multiVariantFeature === 'variant-name') { // replace 'variant-name' with the name of your variant
      // Do something
    }

    // Optional use the 'useFeatureFlagWithPayload' hook for fetching the feature flag payload

    return <div/>
}

// Defaults to undefined if not loaded yet or if there was a problem loading
posthog.isFeatureEnabled('key-for-your-boolean-flag')

// Defaults to undefined if not loaded yet or if there was a problem loading
posthog.getFeatureFlag('key-for-your-boolean-flag')

// Multivariant feature flags are returned as a string
posthog.getFeatureFlag('key-for-your-multivariate-flag')

// Optional fetch the payload returns 'JsonType' or undefined if not loaded yet or if there was a problem loading
posthog.getFeatureFlagPayload('key-for-your-multivariate-flag')

posthog.reloadFeatureFlagsAsync().then((refreshedFlags) => console.log(refreshedFlags))

posthog.reloadFeatureFlags()

export const posthog = new PostHog('<ph_project_api_key>', {
  // usually 'https://us.i.posthog.com' or 'https://eu.i.posthog.com'  
  host: https://us.i.posthog.com, 
  featureFlagsRequestTimeoutMs: 10000 // Time in milliseconds. Default is 10000 (10 seconds).
})

posthog.setPersonPropertiesForFlags({'property1': 'value', property2: 'value2'})

posthog.setPersonPropertiesForFlags({'property1': 'value', property2: 'value2'}, false)

posthog.resetPersonPropertiesForFlags()

// set properties for a group
posthog.setGroupPropertiesForFlags({'company': {'property1': 'value', property2: 'value2'}})

// reset properties for a given group:
posthog.resetGroupPropertiesForFlags('company')

// reset properties for all groups:
posthog.resetGroupPropertiesForFlags()

// With the useFeatureFlag hook
import { useFeatureFlag } from 'posthog-react-native'

const MyComponent = () => {
    const variant = useFeatureFlag('experiment-feature-flag-key')

    if (variant === undefined) {
        // the response is undefined if the flags are being loaded
        return null
    }

    if (variant == 'variant-name') {
        // do something
    }
}

posthog.group('company', 'company_id_in_your_db')

posthog.capture('upgraded_plan') // this event is associated with company ID `company_id_in_your_db`

posthog.group('company', 'company_id_in_your_db', {
    name: 'Awesome Inc.',
    employees: 11,
})

// App.(js|ts)
import { usePostHog, PostHogProvider } from 'posthog-react-native'
...

export function MyApp() {
    return (
        <PostHogProvider apiKey="<ph_project_api_key>" options={{
            // Disable PostHog in development (or whatever other logic you choose)
            disabled: __DEV__,
        }}>
            <MyComponent />
        </PostHogProvider>
    )
}

const MyComponent = () => {
    const posthog = usePostHog()

    useEffect(() => {
        // Safe to call even when disabled!
        posthog.capture("mycomponent_loaded", { foo: "bar" })
    }, [])
}

// DEPRECATED V1 Setup

import PostHog from 'posthog-react-native'

await PostHog.setup('<ph_project_api_key>', {
    // usually 'https://us.i.posthog.com' or 'https://eu.i.posthog.com'
    host: https://us.i.posthog.com, 
    captureApplicationLifecycleEvents: false, // Replaced by 'PostHogProvider'
    captureDeepLinks: false, // No longer supported
    recordScreenViews: false, // Replaced by 'PostHogProvider' supporting @react-navigation/native
    flushInterval: 30, // Stays the same
    flushAt: 20, // Stays the same
    android: {...}, // No longer needed
    iOS: {...}, // No longer needed
})

PostHog.capture("foo")


// V2 Setup difference
import PostHog from 'posthog-react-native'

const posthog = await Posthog.initAsync('<ph_project_api_key>', {
    // usually 'https://us.i.posthog.com' or 'https://eu.i.posthog.com'
    host: https://us.i.posthog.com, 
    // Add any other options here.
})

// Use created instance rather than the PostHog class
posthog.capture("foo")

// V3 Setup difference
import PostHog from 'posthog-react-native'

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

// Use created instance rather than the PostHog class
posthog.capture("foo")