{"library":"mixpanel-react-native","title":"Mixpanel React Native SDK","description":"Mixpanel React Native SDK is the official open-source library for integrating Mixpanel analytics into React Native applications, supporting both iOS and Android platforms. It acts as a wrapper around Mixpanel's native SDKs and enables robust offline tracking capabilities. The current stable version is 3.3.0, with frequent minor and patch releases to include enhancements, security updates, and bug fixes, indicating an active development cadence. A key differentiator is its direct wrapping of native SDKs, ensuring consistency with native Mixpanel features, and its explicit support for data persistence via `async-storage` to handle offline scenarios reliably. It's designed for React Native v0.6+ and ships with TypeScript types.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install mixpanel-react-native"],"cli":null},"imports":["import { Mixpanel } from 'mixpanel-react-native';","import type { MixpanelInstance } from 'mixpanel-react-native';","import type { MixpanelProperties } from 'mixpanel-react-native';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useEffect } from 'react';\nimport { Button, SafeAreaView, Text, View } from 'react-native';\nimport { Mixpanel } from 'mixpanel-react-native';\n\nconst projectToken = process.env.MIXPANEL_PROJECT_TOKEN ?? 'YOUR_MIXPANEL_PROJECT_TOKEN'; // Replace with your Mixpanel project token\nconst trackAutomaticEvents = false;\n\nconst mixpanel = new Mixpanel(projectToken, trackAutomaticEvents);\n\nexport default function App() {\n  useEffect(() => {\n    mixpanel.init();\n  }, []);\n\n  const trackEvent = (eventName) => {\n    mixpanel.track(eventName, { source: 'React Native App', time: new Date().toISOString() });\n    console.log(`Tracked event: ${eventName}`);\n  };\n\n  const identifyUser = () => {\n    const userId = 'user123'; // Replace with actual user ID\n    mixpanel.identify(userId);\n    mixpanel.people.set({ '$first_name': 'Test', '$last_name': 'User', 'plan': 'Free' });\n    console.log(`Identified user: ${userId}`);\n  };\n\n  return (\n    <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <Text style={{ fontSize: 24, marginBottom: 20 }}>Mixpanel React Native Demo</Text>\n      <View style={{ gap: 10 }}>\n        <Button title=\"Track 'App Loaded'\" onPress={() => trackEvent('App Loaded')} />\n        <Button title=\"Track 'Button Clicked'\" onPress={() => trackEvent('Button Clicked')} />\n        <Button title=\"Identify User\" onPress={identifyUser} />\n        <Button title=\"Reset Mixpanel\" onPress={() => mixpanel.reset()} />\n      </View>\n    </SafeAreaView>\n  );\n}","lang":"typescript","description":"This example demonstrates basic Mixpanel integration in a React Native app, including initialization, tracking custom events with properties, identifying a user, setting user profile properties, and resetting the Mixpanel instance.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}