How to Set Up React Native/Expo with PostHog for Logging

If you're building a mobile app with React Native or Expo, you’ll likely want to track user behavior to understand how people are using your app. PostHog is a powerful open-source analytics tool that can help you do just that. It allows you to log events, monitor user journeys, and make data-driven decisions to improve your app.

In this guide, I’ll show you how to integrate PostHog into your React Native or Expo project. By the end, you’ll have a working setup to track user interactions and analyze their behavior.

Why Use PostHog with React Native/Expo?

Before jumping into the setup, let’s talk about why PostHog is a great choice for your app:

1. Event Tracking: You can log custom events like button clicks, screen views, or any user action.
2. User Insights: Understand who your users are, how they navigate your app, and where they might be getting stuck.
3. Open Source: PostHog is open-source, so you can self-host it or use their cloud service.
4. Real-Time Data: Get instant feedback on user behavior, which is incredibly useful for debugging and improving your app.

What You’ll Need

Before starting, make sure you have the following:

• A React Native or Expo project up and running.
• Node.js and npm/yarn installed.
• A PostHog account (you can sign up for free at posthog.com).

Step 1: Install PostHog in Your Project

First, you’ll need to add the PostHog library to your project. Open your terminal, navigate to your project folder, and run one of the following commands:

npm install posthog-react-native

If you’re using Expo, you’ll also need to install the Expo-compatible package:

expo install @posthog/react-native-expo

Step 2: Initialize PostHog

Once the library is installed, you’ll need to initialize PostHog in your app. The best place to do this is in your app’s entry point, such as App.js or index.js.

Here’s an example of how to set it up:

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import PostHog from 'posthog-react-native';

const POSTHOG_API_KEY = 'YOUR_POSTHOG_API_KEY';
const POSTHOG_HOST = 'https://app.posthog.com'; // Replace with your PostHog instance URL

const App = () => {
  useEffect(() => {
    PostHog.setup(POSTHOG_API_KEY, {
      host: POSTHOG_HOST,
      debug: __DEV__,
    });

    PostHog.identify('user-id', {
      email: '[email protected]',
      name: 'John Doe',
    });

    PostHog.capture('App Launched');
  }, []);

  return (
    <View>
      <Text>Welcome to My App!</Text>
    </View>
  );
};

export default App;

Replace YOUR_POSTHOG_API_KEY with your actual PostHog API key, which you can find in your PostHog project settings.

Step 3: Track Custom Events

With PostHog initialized, you can start tracking custom events in your app. For example, you might want to log when a user clicks a button or views a specific screen.

Here’s how you can track a button click:

import React from 'react';
import { Button } from 'react-native';
import PostHog from 'posthog-react-native';

const MyButton = () => {
  const handlePress = () => {
    PostHog.capture('Button Clicked', {
      buttonName: 'My Button',
    });
  };

  return <Button title="Click Me" onPress={handlePress} />;
};

export default MyButton;

To track screen views, you can use the useEffect hook in your screen components:

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import PostHog from 'posthog-react-native';

const HomeScreen = () => {
  useEffect(() => {
    PostHog.capture('Screen Viewed', {
      screenName: 'Home',
    });
  }, []);

  return (
    <View>
      <Text>Welcome to the Home Screen!</Text>
    </View>
  );
};

export default HomeScreen;

Step 4: Test Your Setup

After setting everything up, it’s time to test if PostHog is working correctly. Run your app and perform some actions that trigger the events you’ve set up. Then, check your PostHog dashboard to see if the events are being logged.

If you don’t see any data, double-check the following:

• Your API key and host URL are correct.
• Your app has an active internet connection.
• Debug mode is enabled (debug: __DEV__) to see logs in the console.

Step 5: Explore Advanced Features (Optional)

Once the basics are working, you can dive into some of PostHog’s advanced features:

1. User Properties: Use PostHog.identify to attach additional details to users, such as their subscription plan or preferences.
2. Feature Flags: Gradually roll out new features using PostHog’s feature flags.
3. Session Replay: Record user sessions to see exactly how users interact with your app.

Troubleshooting Tips

If you encounter issues, here are a few things to check:

• Expo Compatibility: If you’re using Expo, make sure you’ve installed the @posthog/react-native-expo package.
• Network Permissions: PostHog requires network access, so ensure your app has the necessary permissions.
• Debug Mode: Enable debug mode during development to see logs in the console.

Final Thoughts

Integrating PostHog with your React Native or Expo app is a simple yet powerful way to gain insights into user behavior. By tracking events, identifying users, and analyzing data, you can make informed decisions to enhance your app’s user experience.

Whether you’re working on a small project or a large-scale application, PostHog is a flexible tool that can adapt to your needs. Give it a try, and start unlocking the full potential of your app’s data! Happy coding! 🎯