Better Analytics v0.7.0 - Expo-First Support + Platform-Specific Types

Better Analytics v0.7.0 - Expo Support + Platform-Specific Types

🎯 Major Features

• 📱 Expo Support: Complete Expo integration optimized for the Expo ecosystem with native device information
• 🎯 Platform-Specific Types: Separate TypeScript types for web, mobile, and server to prevent confusion and improve DX
• 🔄 Navigation Tracking: Automatic screen navigation tracking for mobile apps
• 💾 Mobile Offline Support: AsyncStorage-based event queuing for offline scenarios
• 📱 Native Device Info: Rich device metadata using Expo modules (Device, Application, Localization, Network)
• 🎯 Provider Pattern: React Context-based AnalyticsProvider for app-wide configuration

📦 Installation

# For Expo projects (Recommended)
npm install better-analytics @react-native-async-storage/async-storage
npx expo install expo-device expo-application expo-localization expo-network

🚀 Quick Start

Provider Setup (Recommended)

import { AnalyticsProvider } from "better-analytics/expo";

export default function App() {
  return (
    <AnalyticsProvider 
      site="my-app"
      debug={__DEV__}
      trackNavigation={true}
    >
      <YourAppContent />
    </AnalyticsProvider>
  );
}

Manual Setup

import { initExpo } from "better-analytics/expo";

initExpo({
  site: 'my-app',
  debug: __DEV__,
  trackNavigation: true
});

Usage in Components

import { useAnalytics } from "better-analytics/expo";

function HomeScreen() {
  const { track, trackScreen, identify } = useAnalytics();
  
  useEffect(() => {
    trackScreen('Home');
  }, []);
  
  const handleSignup = async () => {
    await identify('user123', { 
      email: 'user@example.com',
      platform: Platform.OS 
    });
    
    track('signup_completed', {
      method: 'email',
      screen: 'home'
    });
  };
}

🎯 Platform-Specific TypeScript Types

Web/Browser Types (Core & Next.js)

import { EventData } from "better-analytics";
// Only web-relevant properties: viewportWidth, page, connectionType

const webEvent: EventData = {
  device: {
    viewportWidth: 1200,     // ✅ Web-specific
    connectionType: '4g'     // ✅ Web-specific
  },
  page: {                    // ✅ Web-specific
    title: 'My Page',
    loadTime: 1250
  }
  // ❌ No mobile properties (platform, brand, app, etc.)
};

Mobile Types (Expo)

import { EventData } from "better-analytics/expo";
// Only mobile-relevant properties: platform, brand, model, app

const mobileEvent: EventData = {
  device: {
    platform: 'ios',         // ✅ Mobile-specific
    brand: 'Apple',          // ✅ Mobile-specific
    model: 'iPhone 14'       // ✅ Mobile-specific
  },
  app: {                     // ✅ Mobile-specific
    version: '1.0.0',
    bundleId: 'com.myapp'
  }
  // ❌ No web properties (viewportWidth, page, etc.)
};

📱 Mobile-Specific Features

• Native Device Information: Platform, screen dimensions, device model, brand, OS version
• App Metadata: App version, build number, bundle ID
• Session Management: Persistent sessions with 30-minute timeout using AsyncStorage
• Device Fingerprinting: Lightweight device ID generation and persistence
• Network Awareness: Automatic offline detection and event queuing
• Screen Tracking: Specialized trackScreen() for mobile navigation patterns

🏗️ Technical Improvements

• Type Safety: Platform-specific types prevent confusion and improve IntelliSense
• Zero Web Dependencies: Separate mobile-optimized bundle with React Native APIs
• Expo Modules: Full integration with Expo's device information APIs
• Graceful Fallbacks: Works even when optional Expo modules are unavailable
• Bundle Size: Only 1.8KB gzipped for the Expo adapter

📦 Bundle Sizes

Platform	Size (gzipped)
Web/Browser	2.1KB
Next.js	2.3KB
Expo	1.8KB
Server	1.9KB

🔄 Migration from 0.6.0

No breaking changes! Existing web and server code continues to work. New Expo support is additive.

New APIs

• initExpo() - Initialize Expo analytics
• useAnalytics() - React hook for Expo components
• trackScreen() - Mobile-optimized screen tracking