To set up Mixpanel with a React Native application, you will need to follow a series of steps that include installing the Mixpanel SDK, initializing it with your project token, and tracking events. Below is a detailed guide to help you through the process.

Step 1: Create a Mixpanel Account

1. Sign Up: Go to the Mixpanel website and create an account.

2. Create a Project: After signing in, create a new project. You will receive a Project Token, which you will need later for initialization.

Step 2: Install Mixpanel SDK

You can use either npm or yarn to install the Mixpanel SDK in your React Native project.

Using npm:

npm install mixpanel-react-native

Using yarn:

yarn add mixpanel-react-native

iOS Setup:

For iOS, navigate to your app's `ios` folder and run:

pod install

Step 3: Initialize Mixpanel

Create a configuration file (e.g., `mixpanel.js`) in your project to initialize Mixpanel:

import { Mixpanel } from 'mixpanel-react-native'; 
const mixpanel = new Mixpanel('YOUR_PROJECT_TOKEN'); 
mixpanel.init(); 
export default mixpanel;

Replace `'YOUR_PROJECT_TOKEN'` with the token you obtained from your Mixpanel project settings.

Step 4: Track Events

You can track events by calling the `track` method provided by the Mixpanel instance. Here’s how you can do it:

Example of Tracking an Event

In your component, import the initialized Mixpanel instance and use it to track events:

import React from 'react';
import { Button, SafeAreaView } from 'react-native';
import mixpanel from './mixpanel'; // Adjust the path as necessary
const SampleApp = () => {
  const handleButtonPress = () => {
    mixpanel.track('Button Pressed', { buttonName: 'Sample Button' });
  };
  return (
    <SafeAreaView>
      <Button title="Press Me" onPress={handleButtonPress} />
    </SafeAreaView>
  );
};
export default SampleApp;

In this example, when the button is pressed, an event named "Button Pressed" is tracked along with an associated property.

Step 5: User Profiles

In addition to tracking events, Mixpanel enables user profile management. You can set user properties like email or username:

mixpanel.identify('USER_ID'); 
mixpanel.people.set({   "$email": "user@example.com",   "$name": "John Doe" });

You can also increment properties like user points or number of visits:

mixpanel.people.increment('Visit Count', 1);

Step 6: Advanced Features

Timed Events: You can time how long a user interacts with a particular feature.

mixpanel.time_event('Video Watched');

When the event is triggered, it will capture the duration:

mixpanel.track('Video Watched');

Super Properties: These are common properties you want to attach to all events, like app version or device type.

mixpanel.registerSuperProperties({   "app_version": "1.0",   "platform": "iOS" });

Step 7: Handling GDPR Requests

For privacy and GDPR compliance, you can allow users to opt out of data tracking by clearing their data or disabling tracking:

mixpanel.optOutTracking(); mixpanel.clearSuperProperties();

Step 8: Running in Production

Ensure that the SDK is running properly in both development and production environments. You can use Mixpanel’s Debugger to verify if the events and properties are logged as expected.

After implementing tracking, you can view incoming events in your Mixpanel dashboard. Navigate to your project and check the Events section to see real-time data about user interactions.

By following these steps, you should be able to successfully integrate and utilize Mixpanel within your React Native application.

Also Read: How to Filter by hour in Mixpanel or How to integrate Sentry with Mixpanel.