React Native Integration

Click here for the PostHog React Native library. This is an optional library you can install if you're working with React Native.

This page of the Docs refers specifically to the Official PostHog React Native Library to capture and send events to any PostHog instance (including posthog.com).

This library uses an internal queue to make calls fast and non-blocking. It also batches requests and flushes asynchronously, making it perfect to use in any part of your mobile app.

Installation

First make sure you have CocoaPods installed. See here for React Native specific instructions.

Then add the posthog-react-native package to your project:

yarn add posthog-react-native

Then link the native libraries:

yarn react-native link

If you're building for iOS, also make sure you have the latest PostHog iOS Pod installed:

cd ios
pod install
cd ..

Configuration

Somewhere your application, setup the SDK like so:

import PostHog from 'posthog-react-native'

await PostHog.setup('YOUR_API_KEY', {
    // PostHog API host
    host: 'https://app.posthog.com',

    // Record certain application events automatically! (off/false by default)
    captureApplicationLifecycleEvents: true,

    // Capture deep links as part of the screen call. (off by default)
    captureDeepLinks: true,

    // Record screen views automatically! (off/false by default)
    recordScreenViews: true,

    // Max delay before flushing the queue (30 seconds)
    flushInterval: 30,

    // Maximum number of events to keep in queue before flushing (20)
    flushAt: 20,

    // Used only for Android
    android: {
        // Enable or disable collection of ANDROID_ID (true)
        collectDeviceId: true,
    },

    // Used only for iOS
    iOS: {
        // Automatically capture in-app purchases from the App Store
        captureInAppPurchases: false,

        // Capture push notifications
        capturePushNotifications: false,

        // Capture advertisting info
        enableAdvertisingCapturing: true,

        // The maximum number of items to queue before starting to drop old ones.
        maxQueueSize: 1000,

        // Record bluetooth information.
        shouldUseBluetooth: false,

        // Use location services. Will ask for permissions.
        shouldUseLocationServices: false
    }
})

See the iOS integration and Android integration pages for more details on some of these options.

The PostHog.setup() call returns a promise, which resolves once the initialisation has finished. All calls to functions (e.g. capture) will be queued and dispatched once initialisation has finished.

Making calls

Identify

When you start tracking events with PostHog, each user gets an anonymous ID that is used to identify them in the system. In order to link this anonymous user with someone from your database, use the identify call.

Identify lets you add metadata on your users so you can more easily identify who they are in PostHog, and even do things like segment users by these properties.

An identify call requires:

• distinctId which uniquely identifies your user in your database
• userProperties with a dictionary with key: value pairs

import PostHog from 'posthog-react-native'

PostHog.identify('distinctID', {
    email: 'user@posthog.com',
    name: 'My Name'
})

The most obvious place to make this call is whenever a user signs up, or when they update their information.

When you call identify, all previously tracked anonymous events will be linked to the user.

Capture

Capture allows you to capture anything a user does within your system, which you can later use in PostHog to find patterns in usage, work out which features to improve or where people are giving up.

A capture call requires:

• event to specify the event name

  • We recommend naming events with "[noun] [verb]", such as movie played or movie updated, in order to easily identify what your events mean later on (we know this from experience).

Optionally you can submit:

• properties, which is an object with any information you'd like to add

For example:

import PostHog from 'posthog-react-native'

PostHog.capture('Button B Clicked', {
    color: "blue",
    icon: "new2-final"
})

Flush

You can set the number of events in the configuration that should queue before flushing. Setting this to 1 will send events immediately and will use more battery. This is set to 20 by default.

You can also configure the flush interval. By default we flush all events after 30 seconds, no matter how many events have gathered.

You can also manually flush the queue, like so:

import PostHog from 'posthog-react-native'

PostHog.flush()

Reset

To reset the user's ID and anonymous ID, call reset. Usually you would do this right after the user logs out.

import PostHog from 'posthog-react-native'

PostHog.reset()

Opt In/Out

To Opt In/Out of tracking, use the following calls:

import PostHog from 'posthog-react-native'

PostHog.enable() // opt in
PostHog.disable() // opt out

This is the suggested way to prevent capturing data from the admin on the page, as well as from team members of your organization. A simple way to do this is to access the page as the admin (or any other user on your team you wish to stop capturing data on), and call posthog.opt_out_capturing(); on the developer console. You can also add this logic in you app and call it directly after an admin/team member logs in.

If you still wish to capture these events but want to create a distinction between users and team in PostHog, you should look into Cohorts.

Sending screen views

With recordScreenViews, PostHog will try to record all screen changes automatically.

If you want to manually send a new screen capture event, use the screen function.

This function requires a name. You may also pass in an optional properties object.

import PostHog from 'posthog-react-native'

PostHog.screen("Dashboard", {
    background: 'blue',
    hero: 'superhog'
})

Thank You

This library is largely based on the analytics-react-native package.