React Native experiments installation

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

To install, add the posthog-react-native package to your project as well as the required peer dependencies.

Expo apps

npx expo install posthog-react-native expo-file-system expo-application expo-device expo-localization

React Native apps

yarn add posthog-react-native @react-native-async-storage/async-storage react-native-device-info react-native-localize
# or
npm i -s posthog-react-native @react-native-async-storage/async-storage react-native-device-info react-native-localize

React Native Web and macOS

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

Configuration

With the PosthogProvider

The recommended way to set up PostHog for React Native is to use the PostHogProvider. This utilizes the Context API to pass the PostHog client around, and enables autocapture.

To set up PostHogProvider, add it to your App.js or App.ts file:

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

Then you can access PostHog using the usePostHog() hook:

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

    useEffect(() => {
        posthog.capture("event_name")
    }, [posthog])
}

Without the PosthogProvider

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

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

Then you can access PostHog by importing your instance:

import { posthog } from './posthog'

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

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

You can even use this instance with the PostHogProvider:

import { posthog } from './posthog'

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

Once PostHog is initialized, you should be able to capture events.

For this tutorial, let's capture a conversion event on a <button id="cta"> click.

import React from 'react'
import { Button } from 'react-native'
import { usePostHog } from 'posthog-react-native'

export function CTAButton() {
  const posthog = usePostHog()
  return (
    <Button
      title="Click me"
      onPress={() => posthog?.capture('cta clicked')}
      testID="cta"
    />
  )
}

Before proceeding, let's make sure events are being captured and sent to PostHog. You should see cta clicked events appear in the Activity feed.

Go to the Experiments tab in the PostHog app and click on the New experiment button in the top right.

For this tutorial, let's create a new experiment using simplified test values:

• Name: "Test experiment"
• Description: "This is a test experiment"
• Feature flag key: "test-experiment-ff-key"
• Experiment type: "Feature flag"
• Variants: "control" and "test"
• Participant type: "Users"

Then click Save as draft.

Scroll down to the Primary metrics section and click + Add primary metric.

Choose Single-use and select Type > Mean.

Then search for the event cta clicked under Metric and click Save.

By default, experiments are exposed to 100% of users. You can customize release conditions to expose the experiment to a subset of users.

For this tutorial, we'll ship the experiment to all users and click Launch in the top right.

Use the React hooks to evaluate the experiment flag and render the <button id="cta"> text based on the assigned variant.

import React from 'react'
import { Button } from 'react-native'
import { useFeatureFlag, usePostHog } from 'posthog-react-native'

export function CTAButton() {
  const posthog = usePostHog()
  const variant = useFeatureFlag('test-experiment-ff-key') 

  const title = variant === 'control' ? 'Control CTA' : 'Test CTA'
  return (
    <Button
      testID="cta"
      title={title}
      onPress={() => posthog?.capture('cta clicked')}
    />
  )
}

Now when a user triggers a cta clicked event, PostHog automatically assigns the user to a variant and records an experiment exposure.

By default, users are split equally between variants. If you want to assign specific users to a specific variant, see more about distribution and release conditions.

Make sure exposures and feature flag calls are being sent to PostHog. You should see $feature_flag_called events appear in the Activity feed.

As you capture more cta clicked events, more exposures will populate the primary metrics in your experiment.

With enough data, you can analyze the experiment and its variants by:

• Conversion rates
• Statistical significance
• Credible intervals
• Chance to win %
• Minimum detectable effect
• And more