mixpanel-react-native 3.1.2 → 3.1.3

package/Samples/MixpanelStarter/src/screens/SettingsScreen.tsx

@@ -0,0 +1,316 @@
+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, ScrollView, Switch, Alert} from 'react-native';
+import {useMixpanel} from '../contexts/MixpanelContext';
+import {ActionButton} from '../components/ActionButton';
+import {InfoCard} from '../components/InfoCard';
+import {Events} from '../constants/tracking';
+
+export const SettingsScreen: React.FC = () => {
+  const {mixpanel, isInitialized, track, reset, flush} = useMixpanel();
+  const [trackingEnabled, setTrackingEnabled] = useState(true);
+  const [distinctId, setDistinctId] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+  const [sdkVersion, setSdkVersion] = useState<string>('');
+
+  useEffect(() => {
+    // Track screen view
+    if (isInitialized) {
+      track(Events.SCREEN_VIEWED, {
+        screen_name: 'Settings',
+        timestamp: new Date().toISOString(),
+      });
+    }
+  }, [isInitialized, track]);
+
+  useEffect(() => {
+    // Get current settings
+    const fetchSettings = async () => {
+      if (mixpanel && isInitialized) {
+        try {
+          // Get distinct ID
+          const id = await mixpanel.getDistinctId();
+          setDistinctId(id);
+
+          // Check opt-out status
+          const hasOptedOut = await mixpanel.hasOptedOutTracking();
+          setTrackingEnabled(!hasOptedOut);
+        } catch (error) {
+          console.error('Failed to fetch settings:', error);
+        }
+      }
+    };
+    fetchSettings();
+  }, [mixpanel, isInitialized]);
+
+  const handleToggleTracking = async (value: boolean) => {
+    setLoading(true);
+    try {
+      if (value) {
+        // Opt in to tracking
+        await mixpanel?.optInTracking();
+        track(Events.TRACKING_OPTED_IN, {
+          timestamp: new Date().toISOString(),
+        });
+        Alert.alert(
+          'Tracking Enabled',
+          'Analytics tracking has been enabled. Your events will now be sent to Mixpanel.',
+        );
+      } else {
+        // Track opt-out event before opting out
+        track(Events.TRACKING_OPTED_OUT, {
+          timestamp: new Date().toISOString(),
+        });
+        // Flush events before opting out
+        await mixpanel?.flush();
+        // Opt out of tracking
+        await mixpanel?.optOutTracking();
+        Alert.alert(
+          'Tracking Disabled',
+          'Analytics tracking has been disabled. No events will be sent until you opt back in.',
+        );
+      }
+      setTrackingEnabled(value);
+    } catch (error) {
+      console.error('Failed to toggle tracking:', error);
+      Alert.alert('Error', 'Failed to update tracking preference');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleResetData = () => {
+    Alert.alert(
+      'Reset All Data',
+      'This will clear your distinct ID, user profile, and all local data. Are you sure?',
+      [
+        {text: 'Cancel', style: 'cancel'},
+        {
+          text: 'Reset',
+          style: 'destructive',
+          onPress: async () => {
+            setLoading(true);
+            try {
+              // Track reset event before resetting
+              track(Events.DATA_RESET, {
+                timestamp: new Date().toISOString(),
+              });
+
+              // Flush events to ensure reset event is sent
+              await flush();
+
+              // Reset all data
+              reset();
+
+              Alert.alert(
+                'Data Reset',
+                'All your data has been cleared. You now have a new anonymous ID.',
+              );
+
+              // Fetch new distinct ID
+              const newId = await mixpanel?.getDistinctId();
+              if (newId) {
+                setDistinctId(newId);
+              }
+            } catch (error) {
+              console.error('Failed to reset data:', error);
+              Alert.alert('Error', 'Failed to reset data');
+            } finally {
+              setLoading(false);
+            }
+          },
+        },
+      ],
+    );
+  };
+
+  const handleFlushEvents = async () => {
+    setLoading(true);
+    try {
+      // Track flush event
+      track(Events.EVENTS_FLUSHED, {
+        timestamp: new Date().toISOString(),
+      });
+
+      // Flush all queued events
+      await flush();
+
+      Alert.alert(
+        'Events Flushed',
+        'All queued events have been sent to Mixpanel immediately.',
+      );
+    } catch (error) {
+      console.error('Failed to flush events:', error);
+      Alert.alert('Error', 'Failed to flush events');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleViewDistinctId = () => {
+    Alert.alert('Your Distinct ID', distinctId || 'Loading...');
+  };
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Settings</Text>
+        <Text style={styles.subtitle}>Privacy controls and data management</Text>
+      </View>
+
+      <InfoCard title="Your Distinct ID" content={distinctId || 'Loading...'} />
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Privacy Controls</Text>
+
+        <View style={styles.preferenceRow}>
+          <View style={styles.preferenceLabel}>
+            <Text style={styles.preferenceTitle}>Analytics Tracking</Text>
+            <Text style={styles.preferenceSubtitle}>
+              {trackingEnabled
+                ? 'Events are being sent to Mixpanel'
+                : 'Tracking is disabled (GDPR compliant)'}
+            </Text>
+          </View>
+          <Switch
+            value={trackingEnabled}
+            onValueChange={handleToggleTracking}
+            disabled={!isInitialized || loading}
+          />
+        </View>
+
+        <ActionButton
+          title="Reset All Data"
+          onPress={handleResetData}
+          variant="danger"
+          disabled={!isInitialized || loading}
+          loading={loading}
+          style={styles.actionButton}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Developer Tools</Text>
+
+        <ActionButton
+          title="Flush Events Now"
+          onPress={handleFlushEvents}
+          variant="secondary"
+          disabled={!isInitialized || loading}
+          loading={loading}
+          style={styles.actionButton}
+        />
+
+        <ActionButton
+          title="View Distinct ID"
+          onPress={handleViewDistinctId}
+          variant="secondary"
+          disabled={!isInitialized}
+          style={styles.actionButton}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>About</Text>
+
+        <InfoCard
+          title="SDK Information"
+          content={{
+            'SDK Version': '3.1.2',
+            'Implementation Mode': 'Native (iOS: Swift, Android: Java)',
+            'Tracking Status': trackingEnabled ? 'Enabled' : 'Disabled',
+          }}
+        />
+      </View>
+
+      <InfoCard
+        title="What's Happening?"
+        content={`Privacy Controls:
+• optInTracking() / optOutTracking() controls data collection
+• Complies with GDPR and privacy regulations
+• hasOptedOutTracking() checks current status
+• When opted out, no events are sent to Mixpanel
+
+Data Reset:
+• reset() clears all local data and user identity
+• Generates a new anonymous distinct ID
+• Use this for logout or "forget me" functionality
+• Previous events remain in Mixpanel (not deleted)
+
+Manual Flush:
+• flush() immediately sends all queued events
+• Useful before app termination or user logout
+• Events are normally flushed automatically every 60s
+• Ensures data is sent even if app is force-closed
+
+Distinct ID:
+• Every user has a unique distinct ID
+• Anonymous users get an auto-generated UUID
+• Identified users get their custom ID (email, etc.)
+• Used to associate events with individual users`}
+        style={styles.infoCard}
+      />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  content: {
+    padding: 20,
+  },
+  header: {
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+  },
+  section: {
+    marginTop: 20,
+    marginBottom: 10,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 16,
+  },
+  preferenceRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 15,
+    backgroundColor: '#f9f9f9',
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  preferenceLabel: {
+    flex: 1,
+  },
+  preferenceTitle: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#333',
+    marginBottom: 4,
+  },
+  preferenceSubtitle: {
+    fontSize: 13,
+    color: '#666',
+  },
+  actionButton: {
+    marginBottom: 12,
+  },
+  infoCard: {
+    marginTop: 10,
+  },
+});

package/Samples/MixpanelStarter/src/types/mixpanel.types.ts

@@ -0,0 +1,26 @@
+import {Mixpanel} from 'mixpanel-react-native';
+
+export interface MixpanelContextValue {
+  mixpanel: Mixpanel | null;
+  isInitialized: boolean;
+  isLoading: boolean;
+  error: Error | null;
+
+  // Convenience methods
+  track: (eventName: string, properties?: Record<string, any>) => void;
+  identify: (distinctId: string) => void;
+  alias: (alias: string, distinctId?: string) => Promise<void>;
+  reset: () => void;
+  flush: () => Promise<void>;
+}
+
+export interface UserProfile {
+  $email?: string;
+  $name?: string;
+  signup_date?: string;
+  [key: string]: any;
+}
+
+export interface EventProperties {
+  [key: string]: any;
+}

package/Samples/MixpanelStarter/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@env": ["src/@types/env.d.ts"]
+    },
+    "typeRoots": ["./node_modules/@types", "./src/@types"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["**/node_modules", "**/Pods"]
+}

package/__tests__/config.test.js

@@ -0,0 +1,183 @@
+import { MixpanelConfig } from "mixpanel-react-native/javascript/mixpanel-config";
+
+// Mock the dependencies
+jest.mock("mixpanel-react-native/javascript/mixpanel-logger", () => ({
+  MixpanelLogger: {
+    log: jest.fn(),
+  },
+}));
+
+jest.mock("mixpanel-react-native/javascript/mixpanel-constants", () => ({
+  defaultServerURL: "https://api.mixpanel.com",
+  defaultFlushInterval: 60000,
+  defaultFlushBatchSize: 50,
+}));
+
+describe("MixpanelConfig", () => {
+  let config;
+  const testToken = "test-token-123";
+
+  beforeEach(() => {
+    // Clear singleton instance before each test
+    MixpanelConfig.instance = undefined;
+    config = MixpanelConfig.getInstance();
+  });
+
+  describe("getUseIpAddressForGeolocation", () => {
+    test("should return true by default when no config is set", () => {
+      const result = config.getUseIpAddressForGeolocation(testToken);
+      expect(result).toBe(true);
+    });
+
+    test("should return false when explicitly set to false", () => {
+      config.setUseIpAddressForGeolocation(testToken, false);
+      const result = config.getUseIpAddressForGeolocation(testToken);
+      expect(result).toBe(false);
+    });
+
+    test("should return true when explicitly set to true", () => {
+      config.setUseIpAddressForGeolocation(testToken, true);
+      const result = config.getUseIpAddressForGeolocation(testToken);
+      expect(result).toBe(true);
+    });
+
+    test("should return 0 when set to 0 (falsy number)", () => {
+      config.setUseIpAddressForGeolocation(testToken, 0);
+      const result = config.getUseIpAddressForGeolocation(testToken);
+      expect(result).toBe(0);
+    });
+
+    test("should return 1 when set to 1 (truthy number)", () => {
+      config.setUseIpAddressForGeolocation(testToken, 1);
+      const result = config.getUseIpAddressForGeolocation(testToken);
+      expect(result).toBe(1);
+    });
+
+    test("should return null when set to null", () => {
+      config.setUseIpAddressForGeolocation(testToken, null);
+      const result = config.getUseIpAddressForGeolocation(testToken);
+      expect(result).toBe(null);
+    });
+
+    test("should return undefined when set to undefined", () => {
+      config.setUseIpAddressForGeolocation(testToken, undefined);
+      const result = config.getUseIpAddressForGeolocation(testToken);
+      expect(result).toBe(undefined);
+    });
+
+    test("should return empty string when set to empty string", () => {
+      config.setUseIpAddressForGeolocation(testToken, "");
+      const result = config.getUseIpAddressForGeolocation(testToken);
+      expect(result).toBe("");
+    });
+
+    test("should handle multiple tokens independently", () => {
+      const token1 = "token-1";
+      const token2 = "token-2";
+
+      config.setUseIpAddressForGeolocation(token1, false);
+      config.setUseIpAddressForGeolocation(token2, true);
+
+      expect(config.getUseIpAddressForGeolocation(token1)).toBe(false);
+      expect(config.getUseIpAddressForGeolocation(token2)).toBe(true);
+    });
+
+    test("should preserve value after multiple sets", () => {
+      config.setUseIpAddressForGeolocation(testToken, true);
+      expect(config.getUseIpAddressForGeolocation(testToken)).toBe(true);
+
+      config.setUseIpAddressForGeolocation(testToken, false);
+      expect(config.getUseIpAddressForGeolocation(testToken)).toBe(false);
+
+      config.setUseIpAddressForGeolocation(testToken, true);
+      expect(config.getUseIpAddressForGeolocation(testToken)).toBe(true);
+    });
+
+    test("should not affect other config properties when setting geolocation", () => {
+      // Set some other config values first
+      config.setFlushBatchSize(testToken, 100);
+      config.setServerURL(testToken, "https://custom.mixpanel.com");
+
+      // Set geolocation
+      config.setUseIpAddressForGeolocation(testToken, false);
+
+      // Verify other config values are preserved
+      expect(config.getFlushBatchSize(testToken)).toBe(100);
+      expect(config.getServerURL(testToken)).toBe("https://custom.mixpanel.com");
+      expect(config.getUseIpAddressForGeolocation(testToken)).toBe(false);
+    });
+  });
+
+  describe("setUseIpAddressForGeolocation", () => {
+    test("should create config object if it doesn't exist", () => {
+      config.setUseIpAddressForGeolocation(testToken, false);
+      expect(config._config[testToken]).toBeDefined();
+      expect(config._config[testToken].useIpAddressForGeolocation).toBe(false);
+    });
+
+    test("should preserve existing config when updating geolocation", () => {
+      // Set initial config
+      config._config[testToken] = {
+        serverURL: "https://custom.mixpanel.com",
+        flushBatchSize: 100,
+      };
+
+      // Update geolocation
+      config.setUseIpAddressForGeolocation(testToken, false);
+
+      // Verify all properties are preserved
+      expect(config._config[testToken].serverURL).toBe("https://custom.mixpanel.com");
+      expect(config._config[testToken].flushBatchSize).toBe(100);
+      expect(config._config[testToken].useIpAddressForGeolocation).toBe(false);
+    });
+  });
+
+  describe("Regression tests for issue #315", () => {
+    test("BUG FIX: should correctly return false instead of defaulting to true", () => {
+      // This is the main bug that was fixed
+      config.setUseIpAddressForGeolocation(testToken, false);
+      const result = config.getUseIpAddressForGeolocation(testToken);
+
+      // Before fix, this would incorrectly return true
+      expect(result).toBe(false);
+      expect(result).not.toBe(true);
+    });
+
+    test("BUG FIX: should handle all falsy values correctly", () => {
+      const falsyValues = [false, 0, "", null, undefined, NaN];
+
+      falsyValues.forEach((value, index) => {
+        const token = `token-falsy-${index}`;
+        config.setUseIpAddressForGeolocation(token, value);
+        const result = config.getUseIpAddressForGeolocation(token);
+
+        // Before fix, all these would incorrectly return true
+        if (Number.isNaN(value)) {
+          expect(Number.isNaN(result)).toBe(true);
+        } else {
+          expect(result).toBe(value);
+        }
+      });
+    });
+  });
+
+  describe("Integration with network layer", () => {
+    test("should provide correct value for IP parameter in network requests", () => {
+      // Test that the config value would be used correctly in network requests
+      config.setUseIpAddressForGeolocation(testToken, false);
+
+      // This simulates what happens in mixpanel-core.js when sending requests
+      const useIPAddressForGeoLocation = config.getUseIpAddressForGeolocation(testToken);
+      const ipParam = +useIPAddressForGeoLocation; // Convert to number as done in network layer
+
+      expect(ipParam).toBe(0); // false should become 0
+
+      // Test with true
+      config.setUseIpAddressForGeolocation(testToken, true);
+      const useIPAddressForGeoLocationTrue = config.getUseIpAddressForGeolocation(testToken);
+      const ipParamTrue = +useIPAddressForGeoLocationTrue;
+
+      expect(ipParamTrue).toBe(1); // true should become 1
+    });
+  });
+});

package/android/build.gradle

@@ -41,5 +41,5 @@ repositories {
 
 dependencies {
     implementation 'com.facebook.react:react-native:+'
-    implementation 'com.mixpanel.android:mixpanel-android:8.2.0'
+    implementation 'com.mixpanel.android:mixpanel-android:8.2.4'
 }

package/javascript/mixpanel-config.js

@@ -4,7 +4,7 @@ import {
   defaultServerURL,
 } from "./mixpanel-constants";
 
-import {MixpanelLogger} from "./mixpanel-logger";
+import { MixpanelLogger } from "./mixpanel-logger";
 
 export class MixpanelConfig {
   static instance;
@@ -65,10 +65,14 @@ export class MixpanelConfig {
   }
 
   getUseIpAddressForGeolocation(token) {
-    return (
-      (this._config[token] && this._config[token].useIpAddressForGeolocation) ||
-      true
-    );
+    if (
+      this._config[token] &&
+      "useIpAddressForGeolocation" in this._config[token]
+    ) {
+      return this._config[token].useIpAddressForGeolocation;
+    }
+
+    return true;
   }
 
   setFlushBatchSize(token, batchSize) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mixpanel-react-native",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "Official React Native Tracking Library for Mixpanel Analytics",
   "main": "index.js",
   "scripts": {