mixpanel-react-native 3.1.2 → 3.2.0-beta.0

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/components/TestResultDisplay.tsx

@@ -0,0 +1,181 @@
+import React from 'react';
+import {View, Text, StyleSheet, ScrollView} from 'react-native';
+import {TestResult} from '../types/flags.types';
+
+interface TestResultDisplayProps {
+  result: TestResult | null;
+}
+
+const formatResult = (value: any): string => {
+  if (value === null) return 'null';
+  if (value === undefined) return 'undefined';
+  if (typeof value === 'object') {
+    return JSON.stringify(value, null, 2);
+  }
+  if (typeof value === 'string') {
+    return `"${value}"`;
+  }
+  return String(value);
+};
+
+export const TestResultDisplay: React.FC<TestResultDisplayProps> = ({result}) => {
+  if (!result) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.placeholder}>
+          No test results yet. Run a test to see results here.
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Test Result</Text>
+        <Text style={styles.timestamp}>
+          {result.timestamp.toLocaleTimeString()}
+        </Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Method Called</Text>
+        <Text style={styles.codeText}>{result.method}</Text>
+      </View>
+
+      <View style={styles.row}>
+        <View style={styles.col}>
+          <Text style={styles.label}>Flag:</Text>
+          <Text style={styles.value}>{result.flagName}</Text>
+        </View>
+        <View style={styles.col}>
+          <Text style={styles.label}>Type:</Text>
+          <Text style={styles.value}>{result.resultType}</Text>
+        </View>
+      </View>
+
+      <View style={styles.row}>
+        <View style={styles.col}>
+          <Text style={styles.label}>Used Fallback:</Text>
+          <Text style={[styles.value, result.usedFallback && styles.warning]}>
+            {result.usedFallback ? '⚠️ Yes' : '✅ No'}
+          </Text>
+        </View>
+        <View style={styles.col}>
+          <Text style={styles.label}>Time:</Text>
+          <Text style={styles.value}>{result.executionTime}ms</Text>
+        </View>
+      </View>
+
+      {result.usedFallback && (
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Fallback Value</Text>
+          <Text style={styles.codeText}>{formatResult(result.fallback)}</Text>
+        </View>
+      )}
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Returned Value</Text>
+        <Text style={styles.codeText}>{formatResult(result.result)}</Text>
+      </View>
+
+      {result.error && (
+        <View style={[styles.section, styles.errorSection]}>
+          <Text style={styles.errorTitle}>❌ Error</Text>
+          <Text style={styles.errorText}>{result.error}</Text>
+        </View>
+      )}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    padding: 16,
+    maxHeight: 400,
+  },
+  placeholder: {
+    textAlign: 'center',
+    color: '#999',
+    fontSize: 14,
+    padding: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+  },
+  timestamp: {
+    fontSize: 12,
+    color: '#666',
+  },
+  section: {
+    marginBottom: 16,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#666',
+    marginBottom: 8,
+  },
+  codeText: {
+    fontFamily: 'Courier',
+    fontSize: 13,
+    color: '#333',
+    backgroundColor: '#f5f5f5',
+    padding: 12,
+    borderRadius: 4,
+  },
+  row: {
+    flexDirection: 'row',
+    marginBottom: 12,
+  },
+  col: {
+    flex: 1,
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: '#666',
+    marginBottom: 4,
+  },
+  value: {
+    fontSize: 14,
+    color: '#333',
+    fontFamily: 'Courier',
+  },
+  warning: {
+    color: '#ff9800',
+  },
+  errorSection: {
+    backgroundColor: '#fff3f3',
+    padding: 12,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#ffcdd2',
+  },
+  errorTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#d32f2f',
+    marginBottom: 8,
+  },
+  errorText: {
+    fontSize: 13,
+    color: '#d32f2f',
+    fontFamily: 'Courier',
+  },
+});

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

@@ -0,0 +1,77 @@
+// 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',
+
+  // Feature Flags
+  FLAGS_LOADED: 'Feature Flags Loaded',
+  FLAG_CHECKED: 'Feature Flag Checked',
+  FLAG_CONTEXT_UPDATED: 'Feature Flag Context Updated',
+  FLAG_TEST_SYNC: 'Flag Test Sync',
+  FLAG_TEST_ASYNC: 'Flag Test Async',
+  FLAG_TEST_CALLBACK: 'Flag Test Callback',
+  FLAG_TEST_EDGE_CASE: 'Flag Test Edge Case',
+  FLAG_TEST_COERCION: 'Flag Test Type Coercion',
+} 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',
+
+  // Feature Flag properties
+  FLAG_KEY: 'flag_key',
+  FLAG_ENABLED: 'flag_enabled',
+  FLAG_VALUE: 'flag_value',
+  FLAG_METHOD: 'flag_method',
+  FLAG_EXECUTION_TIME: 'flag_execution_time',
+  FLAG_USED_FALLBACK: 'flag_used_fallback',
+  FLAG_RESULT_TYPE: 'flag_result_type',
+
+  // 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,159 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+  ReactNode,
+} from 'react';
+import {Mixpanel} from 'mixpanel-react-native';
+import {Platform} from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+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, AsyncStorage);
+
+        // Initialize with feature flags enabled
+        await instance.init(false, {}, undefined, false, {
+          enabled: true,
+        });
+
+        // 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;
+};