React Native SDK

Track events from React Native mobile apps with the Mixpanel SDK

Installation

1. Install the package

   npm install mixpanel-react-native
   
2. Install iOS dependencies

   Navigate to your iOS folder and install pods:

   cd ios && pod install
   
3. Initialize Mixpanel

   import { Mixpanel } from 'mixpanel-react-native';
   
   const trackAutomaticEvents = false;
   const mixpanel = new Mixpanel('YOUR_PROJECT_TOKEN', trackAutomaticEvents);
   mixpanel.init();
   

Configuration Options

const trackAutomaticEvents = false;
const useNative = true; // Use Native Mode (iOS/Android)
const serverURL = 'https://api.mixpanel.com';
const optOutTrackingDefault = false;
const superProperties = {
  'data_source': 'react-native-app'
};

const mixpanel = new Mixpanel(
  'YOUR_PROJECT_TOKEN',
  trackAutomaticEvents,
  useNative,
  serverURL,
  optOutTrackingDefault,
  superProperties
);

mixpanel.init();

JavaScript Mode (Expo Support)

JavaScript Mode supports Expo and React Native for Web.

1. Install AsyncStorage

   npm install @react-native-async-storage/async-storage
   
2. Initialize with useNative: false

   const useNative = false;
   const mixpanel = new Mixpanel(
     'YOUR_PROJECT_TOKEN',
     false,
     useNative
   );
   mixpanel.init();
   

Track Events

mixpanel.track('Video Played', {
  video_title: 'Introduction to Mixpanel',
  duration: 120,
  quality: 'HD'
});

Timing Events

mixpanel.timeEvent('Image Upload');

// 15 seconds later
mixpanel.track('Image Upload');
// Duration property automatically set

Flush Events

// Flush immediately
mixpanel.flush();

// Adjust batch size
mixpanel.setFlushBatchSize(100);

Identify Users

// User signs in
mixpanel.track('sign in');
mixpanel.identify('12345');

Reset on Logout

mixpanel.track('log out');
mixpanel.reset();

User Profiles

mixpanel.identify('12345');

// Set properties
mixpanel.getPeople().set('plan', 'Premium');

// Set multiple properties
let properties = {
  plan: 'Premium',
  company: 'Acme Inc'
};
mixpanel.getPeople().set(properties);

setOnce()

mixpanel.getPeople().setOnce('name', 'John');
mixpanel.getPeople().setOnce('email', '[e-mail]');

increment()

mixpanel.getPeople().increment('age', 1);
mixpanel.getPeople().increment('login_count', 1);

append()

mixpanel.getPeople().append('roles', 'admin');

union()

// Add without duplicates
mixpanel.getPeople().union('skills', 'React');

Super Properties

mixpanel.registerSuperProperties({
  'App Version': '2.0.1',
  'Platform': 'React Native'
});

mixpanel.registerSuperPropertiesOnce({
  'First App Open': new Date().toISOString()
});

Group Analytics

// Assign user to group
mixpanel.setGroup('company', 'Acme Inc');

// Track event (group is included automatically)
mixpanel.track('feature_used');

// Set group properties
mixpanel.getGroup('company', 'Acme Inc').set('industry', 'Technology');

Privacy Controls

Opt Out

mixpanel.optOutTracking();

// Initialize with opt-out
const optOutTrackingDefault = true;
const mixpanel = new Mixpanel(
  'YOUR_PROJECT_TOKEN',
  false,
  true,
  'https://api.mixpanel.com',
  optOutTrackingDefault
);

EU/India Data Residency

// EU
mixpanel.setServerURL('https://api-eu.mixpanel.com');

// India
mixpanel.setServerURL('https://api-in.mixpanel.com');

Disable Geolocation

mixpanel.setUseIpAddressForGeolocation(false);

Debug Mode

mixpanel.setLoggingEnabled(true);

View logs in Xcode or Android Studio console.

Platform Considerations

• Native Mode: Full iOS/Android SDK features
• JavaScript Mode: Cross-platform, Expo compatible
• Events flush every 60 seconds or on app background
• Batch size: 50 events by default
• Local storage persists until app uninstall

JavaScript Mode does not support legacy auto-tracked events.

Resources

• Full API Reference
• GitHub Repository
• Example App