React Native library

Last updated:

This is the PostHog library for React Native to capture and send events to any PostHog instance.

View on GitHub

This is an optional library you can install if you're working with React Native. It 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. Learn about 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

Setup the PostHog React native SDK as follows:

import PostHog from 'posthog-react-native'


await PostHog.setup('<ph_project_api_key>', {
    // PostHog API host (https://app.posthog.com by default)
    host: '<ph_instance_address>',


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


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


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


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


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


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


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


        // Capture push notifications (false by default)
        capturePushNotifications: false,


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


        // Record bluetooth information. (false by default)
        shouldUseBluetooth: false,


        // Use location services. Will ask for permissions. (false by default)
        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 initialization has finished. All calls to functions (e.g. capture) will be queued and dispatched once initialization has finished.

Making calls

Identify

We highly recommend reading our section on Identifying users to better understand how to correctly use this method.

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

Setting user properties via an event

When capturing an event, you can pass a property called $set as an event property, and specify its value to be an object with properties to be set on the user that will be associated with the user who triggered the event.

$set

Example

PostHog.capture('some event', { $set: { userProperty: 'value' } });

Usage

When capturing an event, you can pass a property called $set as an event property, and specify its value to be an object with properties to be set on the user that will be associated with the user who triggered the event.

$set_once

Example

PostHog.capture('some event', { $set_once: { userProperty: 'value' } });

Usage

$set_once works just like $set, except that it will only set the property if the user doesn't already have that property set.

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.

Ask a question