feat: implement useAnalytics hook and integrate automatic screen trac…

app/_layout.tsx

@@ -1,17 +1,35 @@
-import { Stack } from "expo-router";
-import React from "react";
+import { Stack, usePathname, useSegments } from "expo-router";
+import React, { useEffect } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
 import "../global.css"; // NativeWind CSS
 import { ErrorBoundary } from '../src/components/common/ErrorBoundary';
 import { AnalyticsProvider } from "../src/components/mobile/AnalyticsProvider";
 import { OfflineIndicatorProvider } from "../src/components/mobile/OfflineIndicatorProvider";
 import { SwipeableNavigation } from '../src/components/mobile/SwipeableNavigation';
+import { useAnalytics } from '../src/hooks/useAnalytics';
+
+// Component to handle auto screen tracking
+function ScreenTracker() {
+  const pathname = usePathname();
+  const segments = useSegments();
+  const { trackScreen } = useAnalytics();
+
+  useEffect(() => {
+    if (pathname) {
+      // Basic screen tracking based on pathname
+      trackScreen(pathname, { segments: segments.join('/') });
+    }
+  }, [pathname, segments, trackScreen]);
+
+  return null;
+}
 
 export default function RootLayout() {
   return (
     <ErrorBoundary boundaryName="RootLayout">
       <AnalyticsProvider>
+        <ScreenTracker />
         <OfflineIndicatorProvider>
         <GestureHandlerRootView style={{ flex: 1 }}>
             <Stack>

src/hooks/useAnalytics.ts

@@ -52,11 +52,49 @@ export const useAnalytics = () => {
     [service]
   );
 
+  /**
+   * Track button clicks
+   */
+  const trackButtonClick = useCallback(
+    (buttonName: string, properties?: EventProperties) => {
+      service.trackEvent(AnalyticsEvent.UI_CLICK, { button: buttonName, ...properties });
+    },
+    [service]
+  );
+
+  /**
+   * Track form submissions
+   */
+  const trackFormSubmit = useCallback(
+    (formName: string, properties?: EventProperties) => {
+      service.trackEvent(AnalyticsEvent.FORM_SUBMIT, { form: formName, ...properties });
+    },
+    [service]
+  );
+
+  /**
+   * Track errors
+   */
+  const trackError = useCallback(
+    (error: Error | string, isFatal: boolean = false, properties?: EventProperties) => {
+      const errorMessage = error instanceof Error ? error.message : error;
+      service.trackEvent(isFatal ? AnalyticsEvent.CRASH_REPORT : AnalyticsEvent.API_ERROR, {
+        error: errorMessage,
+        isFatal,
+        ...properties,
+      });
+    },
+    [service]
+  );
+
   return {
     trackEvent,
     trackScreen,
     trackTiming,
     identify,
+    trackButtonClick,
+    trackFormSubmit,
+    trackError,
     service, // Direct access if needed
   };
 };