mixpanel-react-native 3.1.2 → 3.1.3

package/Samples/MixpanelStarter/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "MixpanelStarter",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "lint": "eslint .",
+    "start": "react-native start",
+    "test": "jest"
+  },
+  "dependencies": {
+    "react": "19.1.1",
+    "react-native": "0.82.1",
+    "@react-native/new-app-screen": "0.82.1",
+    "react-native-safe-area-context": "^5.5.2",
+    "mixpanel-react-native": "file:../..",
+    "@react-native-async-storage/async-storage": "^2.1.0",
+    "@react-navigation/native": "^7.0.20",
+    "@react-navigation/bottom-tabs": "^7.2.8",
+    "react-native-screens": "^4.5.0",
+    "react-native-dotenv": "^3.4.11",
+    "react-native-get-random-values": "^1.9.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "20.0.0",
+    "@react-native-community/cli-platform-android": "20.0.0",
+    "@react-native-community/cli-platform-ios": "20.0.0",
+    "@react-native/babel-preset": "0.82.1",
+    "@react-native/eslint-config": "0.82.1",
+    "@react-native/metro-config": "0.82.1",
+    "@react-native/typescript-config": "0.82.1",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^19.1.1",
+    "@types/react-test-renderer": "^19.1.0",
+    "@testing-library/react-native": "^12.8.1",
+    "@testing-library/jest-native": "^5.4.3",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "prettier": "2.8.8",
+    "react-test-renderer": "19.1.1",
+    "typescript": "^5.8.3"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/Samples/MixpanelStarter/src/@types/env.d.ts

@@ -0,0 +1,3 @@
+declare module '@env' {
+  export const MIXPANEL_TOKEN: string;
+}

package/Samples/MixpanelStarter/src/App.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {Text} from 'react-native';
+import {MixpanelProvider} from './contexts/MixpanelContext';
+import {ErrorBoundary} from './components/ErrorBoundary';
+import {OnboardingScreen} from './screens/OnboardingScreen';
+import {HomeScreen} from './screens/HomeScreen';
+import {SettingsScreen} from './screens/SettingsScreen';
+import {MIXPANEL_TOKEN} from '@env';
+
+const Tab = createBottomTabNavigator();
+
+// Fallback token for demo purposes (use your own from Mixpanel dashboard)
+const DEMO_TOKEN = 'YOUR_TOKEN_HERE';
+const token = MIXPANEL_TOKEN || DEMO_TOKEN;
+
+function App(): React.JSX.Element {
+  return (
+    <ErrorBoundary>
+      <MixpanelProvider token={token} trackAutomaticEvents={true} useNative={true}>
+        <NavigationContainer>
+          <Tab.Navigator
+            screenOptions={{
+              tabBarActiveTintColor: '#007AFF',
+              tabBarInactiveTintColor: '#8E8E93',
+              headerStyle: {
+                backgroundColor: '#F2F2F7',
+              },
+              headerTintColor: '#000',
+              headerTitleStyle: {
+                fontWeight: '600',
+              },
+            }}>
+            <Tab.Screen
+              name="Onboarding"
+              component={OnboardingScreen}
+              options={{
+                tabBarLabel: 'User ID',
+                tabBarIcon: ({color}) => (
+                  <Text style={{fontSize: 20, color}}>👤</Text>
+                ),
+              }}
+            />
+            <Tab.Screen
+              name="Home"
+              component={HomeScreen}
+              options={{
+                tabBarLabel: 'Events',
+                tabBarIcon: ({color}) => (
+                  <Text style={{fontSize: 20, color}}>📊</Text>
+                ),
+              }}
+            />
+            <Tab.Screen
+              name="Settings"
+              component={SettingsScreen}
+              options={{
+                tabBarLabel: 'Settings',
+                tabBarIcon: ({color}) => (
+                  <Text style={{fontSize: 20, color}}>⚙️</Text>
+                ),
+              }}
+            />
+          </Tab.Navigator>
+        </NavigationContainer>
+      </MixpanelProvider>
+    </ErrorBoundary>
+  );
+}
+
+export default App;

package/Samples/MixpanelStarter/src/components/ActionButton.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+
+interface ActionButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'danger';
+  disabled?: boolean;
+  loading?: boolean;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export const ActionButton: React.FC<ActionButtonProps> = ({
+  title,
+  onPress,
+  variant = 'primary',
+  disabled = false,
+  loading = false,
+  style,
+  textStyle,
+}) => {
+  const isDisabled = disabled || loading;
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        styles[variant],
+        isDisabled && styles.disabled,
+        style,
+      ]}
+      onPress={onPress}
+      disabled={isDisabled}
+      activeOpacity={0.7}>
+      {loading ? (
+        <ActivityIndicator
+          color={variant === 'secondary' ? '#007AFF' : '#fff'}
+        />
+      ) : (
+        <Text style={[styles.text, styles[`${variant}Text`], textStyle]}>
+          {title}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44,
+  },
+  primary: {
+    backgroundColor: '#007AFF',
+  },
+  secondary: {
+    backgroundColor: '#f0f0f0',
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+  danger: {
+    backgroundColor: '#FF3B30',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  primaryText: {
+    color: '#fff',
+  },
+  secondaryText: {
+    color: '#007AFF',
+  },
+  dangerText: {
+    color: '#fff',
+  },
+});

package/Samples/MixpanelStarter/src/components/ErrorBoundary.tsx

@@ -0,0 +1,81 @@
+import React, {Component, ErrorInfo, ReactNode} from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {hasError: false, error: null};
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return {hasError: true, error};
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  handleReset = () => {
+    this.setState({hasError: false, error: null});
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <View style={styles.container}>
+          <Text style={styles.title}>Oops! Something went wrong</Text>
+          <Text style={styles.message}>
+            {this.state.error?.message || 'Unknown error'}
+          </Text>
+          <TouchableOpacity style={styles.button} onPress={this.handleReset}>
+            <Text style={styles.buttonText}>Try Again</Text>
+          </TouchableOpacity>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+    backgroundColor: '#fff',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 10,
+    color: '#333',
+  },
+  message: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  button: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 8,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/Samples/MixpanelStarter/src/components/InfoCard.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {View, Text, StyleSheet, ViewStyle} from 'react-native';
+
+interface InfoCardProps {
+  title: string;
+  content: string | Record<string, any>;
+  style?: ViewStyle;
+}
+
+export const InfoCard: React.FC<InfoCardProps> = ({title, content, style}) => {
+  const renderContent = () => {
+    if (typeof content === 'string') {
+      return <Text style={styles.content}>{content}</Text>;
+    }
+
+    // Render object as key-value pairs
+    return (
+      <View style={styles.kvContainer}>
+        {Object.entries(content).map(([key, value]) => (
+          <View key={key} style={styles.kvRow}>
+            <Text style={styles.key}>{key}:</Text>
+            <Text style={styles.value}>{JSON.stringify(value)}</Text>
+          </View>
+        ))}
+      </View>
+    );
+  };
+
+  return (
+    <View style={[styles.card, style]}>
+      <Text style={styles.title}>{title}</Text>
+      {renderContent()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#f9f9f9',
+    borderRadius: 8,
+    padding: 15,
+    marginVertical: 8,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#666',
+    marginBottom: 8,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+  content: {
+    fontSize: 14,
+    color: '#333',
+    lineHeight: 20,
+  },
+  kvContainer: {
+    gap: 6,
+  },
+  kvRow: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  key: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#666',
+    minWidth: 120,
+  },
+  value: {
+    fontSize: 14,
+    color: '#333',
+    flex: 1,
+  },
+});

package/Samples/MixpanelStarter/src/constants/tracking.ts

@@ -0,0 +1,58 @@
+// Event Names
+export const Events = {
+  // Screen Views
+  SCREEN_VIEWED: 'Screen Viewed',
+
+  // User Actions
+  USER_SIGNED_UP: 'User Signed Up',
+  USER_LOGGED_IN: 'User Logged In',
+  USER_LOGGED_OUT: 'User Logged Out',
+  GUEST_CONTINUED: 'Guest Continued',
+
+  // Content Interactions
+  PRODUCT_VIEWED: 'Product Viewed',
+  VIDEO_STARTED: 'Video Started',
+  VIDEO_COMPLETED: 'Video Completed',
+
+  // Settings
+  DARK_MODE_TOGGLED: 'Dark Mode Toggled',
+  NOTIFICATIONS_TOGGLED: 'Notifications Toggled',
+  TRACKING_OPTED_IN: 'Tracking Opted In',
+  TRACKING_OPTED_OUT: 'Tracking Opted Out',
+  DATA_RESET: 'Data Reset',
+  EVENTS_FLUSHED: 'Events Flushed',
+} as const;
+
+// Property Names
+export const Properties = {
+  // Screen properties
+  SCREEN_NAME: 'screen_name',
+
+  // User properties
+  USER_ID: 'user_id',
+  USER_EMAIL: 'user_email',
+  SIGNUP_DATE: 'signup_date',
+
+  // Content properties
+  PRODUCT_ID: 'product_id',
+  PRODUCT_NAME: 'product_name',
+  PRODUCT_CATEGORY: 'product_category',
+  VIDEO_TITLE: 'video_title',
+  VIDEO_DURATION: 'video_duration',
+
+  // Settings properties
+  DARK_MODE_ENABLED: 'dark_mode_enabled',
+  NOTIFICATIONS_ENABLED: 'notifications_enabled',
+
+  // Metadata
+  TIMESTAMP: 'timestamp',
+  APP_VERSION: 'app_version',
+  PLATFORM: 'platform',
+} as const;
+
+// Super Property Keys
+export const SuperProperties = {
+  APP_VERSION: 'App Version',
+  PLATFORM: 'Platform',
+  ENVIRONMENT: 'Environment',
+} as const;

package/Samples/MixpanelStarter/src/contexts/MixpanelContext.tsx

@@ -0,0 +1,156 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+  ReactNode,
+} from 'react';
+import {Mixpanel} from 'mixpanel-react-native';
+import {Platform} from 'react-native';
+import {MixpanelContextValue} from '../types/mixpanel.types';
+import {SuperProperties} from '../constants/tracking';
+
+const MixpanelContext = createContext<MixpanelContextValue | undefined>(
+  undefined,
+);
+
+interface MixpanelProviderProps {
+  children: ReactNode;
+  token: string;
+  trackAutomaticEvents?: boolean;
+  useNative?: boolean;
+}
+
+export const MixpanelProvider: React.FC<MixpanelProviderProps> = ({
+  children,
+  token,
+  trackAutomaticEvents = true,
+  useNative = true,
+}) => {
+  const [mixpanel, setMixpanel] = useState<Mixpanel | null>(null);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const initMixpanel = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+
+        // Create Mixpanel instance
+        const instance = useNative
+          ? new Mixpanel(token, trackAutomaticEvents, true)
+          : new Mixpanel(token, trackAutomaticEvents, false);
+
+        // Initialize
+        await instance.init();
+
+        // Set up default super properties
+        instance.registerSuperProperties({
+          [SuperProperties.APP_VERSION]: '1.0.0',
+          [SuperProperties.PLATFORM]: Platform.OS,
+          [SuperProperties.ENVIRONMENT]: __DEV__ ? 'development' : 'production',
+        });
+        // Enable logging for debugging
+        instance.setLoggingEnabled(__DEV__);
+        
+        setMixpanel(instance);
+        setIsInitialized(true);
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setError(error);
+        console.error('Failed to initialize Mixpanel:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    initMixpanel();
+  }, [token, trackAutomaticEvents, useNative]);
+
+  // Convenience wrapper methods
+  const track = useCallback(
+    (eventName: string, properties?: Record<string, any>) => {
+      if (!mixpanel || !isInitialized) {
+        console.warn(
+          'Mixpanel not initialized yet. Event not tracked:',
+          eventName,
+        );
+        return;
+      }
+      mixpanel.track(eventName, properties);
+    },
+    [mixpanel, isInitialized],
+  );
+
+  const identify = useCallback(
+    (distinctId: string) => {
+      if (!mixpanel || !isInitialized) {
+        console.warn('Mixpanel not initialized yet. Identify skipped.');
+        return;
+      }
+      mixpanel.identify(distinctId);
+    },
+    [mixpanel, isInitialized],
+  );
+
+  const alias = useCallback(
+    async (aliasValue: string, distinctId?: string) => {
+      if (!mixpanel || !isInitialized) {
+        console.warn('Mixpanel not initialized yet. Alias skipped.');
+        return;
+      }
+      const currentId = distinctId || (await mixpanel.getDistinctId());
+      mixpanel.alias(aliasValue, currentId);
+    },
+    [mixpanel, isInitialized],
+  );
+
+  const reset = useCallback(() => {
+    if (!mixpanel || !isInitialized) {
+      console.warn('Mixpanel not initialized yet. Reset skipped.');
+      return;
+    }
+    mixpanel.reset();
+  }, [mixpanel, isInitialized]);
+
+  const flush = useCallback(async () => {
+    if (!mixpanel || !isInitialized) {
+      console.warn('Mixpanel not initialized yet. Flush skipped.');
+      return;
+    }
+    await mixpanel.flush();
+  }, [mixpanel, isInitialized]);
+
+  const value: MixpanelContextValue = {
+    mixpanel,
+    isInitialized,
+    isLoading,
+    error,
+    track,
+    identify,
+    alias,
+    reset,
+    flush,
+  };
+
+  return (
+    <MixpanelContext.Provider value={value}>
+      {children}
+    </MixpanelContext.Provider>
+  );
+};
+
+/**
+ * Hook to access Mixpanel instance and convenience methods
+ * @throws Error if used outside of MixpanelProvider
+ */
+export const useMixpanel = (): MixpanelContextValue => {
+  const context = useContext(MixpanelContext);
+  if (context === undefined) {
+    throw new Error('useMixpanel must be used within a MixpanelProvider');
+  }
+  return context;
+};