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

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,83 @@
+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 {FeatureFlagsScreen} from './screens/FeatureFlagsScreen';
+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="FeatureFlags"
+              component={FeatureFlagsScreen}
+              options={{
+                tabBarLabel: 'Flags',
+                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/EventTrackingLog.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import {View, Text, StyleSheet, ScrollView} from 'react-native';
+import {TrackedEvent} from '../types/flags.types';
+
+interface EventTrackingLogProps {
+  events: TrackedEvent[];
+  maxEvents?: number;
+}
+
+const getEventEmoji = (eventName: string): string => {
+  if (eventName === '$experiment_started') return '🧪';
+  if (eventName.startsWith('FLAG_')) return '🚩';
+  if (eventName.startsWith('$')) return '📊';
+  return '✅';
+};
+
+const formatEventProperties = (properties: Record<string, any>): string => {
+  const relevantProps: Record<string, any> = {};
+
+  // Extract only the most relevant properties for display
+  const keys = ['$experiment_name', '$variant_name', '$variant_value', '$experiment_id',
+                'flag_key', 'flag_enabled', 'flag_value', 'screen_name'];
+
+  keys.forEach(key => {
+    if (properties[key] !== undefined) {
+      relevantProps[key] = properties[key];
+    }
+  });
+
+  return JSON.stringify(relevantProps, null, 2);
+};
+
+const getTimeAgo = (date: Date): string => {
+  const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  return date.toLocaleTimeString();
+};
+
+export const EventTrackingLog: React.FC<EventTrackingLogProps> = ({
+  events,
+  maxEvents = 10,
+}) => {
+  const displayEvents = events.slice(0, maxEvents);
+
+  if (displayEvents.length === 0) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.placeholder}>
+          No events tracked yet. Interact with flags to see tracking events.
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container} nestedScrollEnabled>
+      {displayEvents.map(event => (
+        <View
+          key={event.id}
+          style={[
+            styles.eventCard,
+            event.eventName === '$experiment_started' && styles.experimentEvent,
+          ]}>
+          <View style={styles.eventHeader}>
+            <View style={styles.eventHeaderLeft}>
+              <Text style={styles.emoji}>{getEventEmoji(event.eventName)}</Text>
+              <View>
+                <Text style={styles.eventName}>{event.eventName}</Text>
+                <Text style={styles.timestamp}>{getTimeAgo(event.timestamp)}</Text>
+              </View>
+            </View>
+          </View>
+
+          {Object.keys(event.properties).length > 0 && (
+            <View style={styles.propertiesSection}>
+              <Text style={styles.propertiesText}>
+                {formatEventProperties(event.properties)}
+              </Text>
+            </View>
+          )}
+        </View>
+      ))}
+
+      {events.length > maxEvents && (
+        <Text style={styles.moreText}>
+          + {events.length - maxEvents} more events
+        </Text>
+      )}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    maxHeight: 400,
+  },
+  placeholder: {
+    textAlign: 'center',
+    color: '#999',
+    fontSize: 14,
+    padding: 20,
+  },
+  eventCard: {
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    marginBottom: 12,
+    padding: 12,
+  },
+  experimentEvent: {
+    borderColor: '#9c27b0',
+    borderWidth: 2,
+    backgroundColor: '#f3e5f5',
+  },
+  eventHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 8,
+  },
+  eventHeaderLeft: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    flex: 1,
+  },
+  emoji: {
+    fontSize: 20,
+    marginRight: 10,
+  },
+  eventName: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 2,
+  },
+  timestamp: {
+    fontSize: 12,
+    color: '#666',
+  },
+  propertiesSection: {
+    marginTop: 8,
+    padding: 10,
+    backgroundColor: '#f8f9fa',
+    borderRadius: 4,
+  },
+  propertiesText: {
+    fontFamily: 'Courier',
+    fontSize: 12,
+    color: '#555',
+  },
+  moreText: {
+    textAlign: 'center',
+    color: '#666',
+    fontSize: 13,
+    paddingVertical: 8,
+    fontStyle: 'italic',
+  },
+});

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

@@ -0,0 +1,199 @@
+import React, {useState} from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import {FlagInfo, ValueType} from '../types/flags.types';
+
+interface FlagCardProps {
+  flag: FlagInfo;
+  onTest?: (flagKey: string) => void;
+}
+
+const getValueTypeEmoji = (type: ValueType): string => {
+  switch (type) {
+    case 'string':
+      return '📝';
+    case 'number':
+      return '🔢';
+    case 'boolean':
+      return '✓';
+    case 'object':
+      return '📦';
+    case 'array':
+      return '📋';
+    case 'null':
+      return '∅';
+    default:
+      return '❓';
+  }
+};
+
+const formatValue = (value: any, type: ValueType): string => {
+  if (type === 'object' || type === 'array') {
+    return JSON.stringify(value, null, 2);
+  }
+  if (type === 'string') {
+    return `"${value}"`;
+  }
+  if (type === 'null') {
+    return 'null';
+  }
+  return String(value);
+};
+
+const getTimeAgo = (date?: Date): string => {
+  if (!date) return 'Never';
+  const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ago`;
+};
+
+export const FlagCard: React.FC<FlagCardProps> = ({flag, onTest}) => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <View style={styles.card}>
+      <TouchableOpacity
+        onPress={() => setExpanded(!expanded)}
+        style={styles.header}>
+        <View style={styles.headerLeft}>
+          <Text style={styles.emoji}>{getValueTypeEmoji(flag.valueType)}</Text>
+          <View>
+            <Text style={styles.flagKey}>{flag.key}</Text>
+            <Text style={styles.value} numberOfLines={expanded ? undefined : 1}>
+              {formatValue(flag.value, flag.valueType)}
+            </Text>
+          </View>
+        </View>
+        <Text style={styles.expandIcon}>{expanded ? '▼' : '▶'}</Text>
+      </TouchableOpacity>
+
+      {expanded && (
+        <View style={styles.details}>
+          <View style={styles.detailRow}>
+            <Text style={styles.label}>Type:</Text>
+            <Text style={styles.detailValue}>{flag.valueType}</Text>
+          </View>
+
+          <View style={styles.detailRow}>
+            <Text style={styles.label}>Variant Key:</Text>
+            <Text style={styles.detailValue}>{flag.variantKey || 'N/A'}</Text>
+          </View>
+
+          {flag.experimentID && (
+            <View style={styles.detailRow}>
+              <Text style={styles.label}>Experiment ID:</Text>
+              <Text style={styles.detailValue}>{flag.experimentID}</Text>
+            </View>
+          )}
+
+          {flag.isExperimentActive !== undefined && (
+            <View style={styles.detailRow}>
+              <Text style={styles.label}>Active:</Text>
+              <Text style={styles.detailValue}>
+                {flag.isExperimentActive ? '✅ Yes' : '⏸️ No'}
+              </Text>
+            </View>
+          )}
+
+          {flag.isQATester !== undefined && (
+            <View style={styles.detailRow}>
+              <Text style={styles.label}>QA Tester:</Text>
+              <Text style={styles.detailValue}>
+                {flag.isQATester ? '🧪 Yes' : 'No'}
+              </Text>
+            </View>
+          )}
+
+          <View style={styles.detailRow}>
+            <Text style={styles.label}>Last Accessed:</Text>
+            <Text style={styles.detailValue}>{getTimeAgo(flag.lastAccessed)}</Text>
+          </View>
+
+          {onTest && (
+            <TouchableOpacity
+              style={styles.testButton}
+              onPress={() => onTest(flag.key)}>
+              <Text style={styles.testButtonText}>Test This Flag</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#f8f9fa',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    marginBottom: 12,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 12,
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  emoji: {
+    fontSize: 24,
+    marginRight: 12,
+  },
+  flagKey: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 4,
+  },
+  value: {
+    fontSize: 14,
+    color: '#666',
+    fontFamily: 'Courier',
+  },
+  expandIcon: {
+    fontSize: 12,
+    color: '#999',
+  },
+  details: {
+    padding: 12,
+    paddingTop: 0,
+    borderTopWidth: 1,
+    borderTopColor: '#e0e0e0',
+  },
+  detailRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  label: {
+    fontSize: 13,
+    color: '#666',
+    fontWeight: '500',
+  },
+  detailValue: {
+    fontSize: 13,
+    color: '#333',
+    fontFamily: 'Courier',
+  },
+  testButton: {
+    marginTop: 8,
+    backgroundColor: '#007AFF',
+    padding: 10,
+    borderRadius: 6,
+    alignItems: 'center',
+  },
+  testButtonText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});