feat(mobile): add PostHog analytics with autocapture and screen tracking

apps/mobile/app.config.ts

@@ -43,7 +43,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
 		favicon: "./assets/favicon.png",
 		bundler: "metro",
 	},
-	plugins: ["expo-router"],
+	plugins: ["expo-router", "expo-localization"],
 	extra: {
 		router: {},
 		eas: {

apps/mobile/app/_layout.tsx

@@ -1,16 +1,6 @@
 import "react-native-get-random-values"; // MUST BE FIRST IMPORT
 import "../global.css";
-import { PortalHost } from "@rn-primitives/portal";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Stack } from "expo-router";
 
-const queryClient = new QueryClient();
+import { RootLayout } from "@/screens/RootLayout";
 
-export default function RootLayout() {
-	return (
-		<QueryClientProvider client={queryClient}>
-			<Stack screenOptions={{ headerShown: false }} />
-			<PortalHost />
-		</QueryClientProvider>
-	);
-}
+export default RootLayout;

apps/mobile/lib/env.ts

@@ -8,6 +8,8 @@ const envSchema = z.object({
 	EXPO_PUBLIC_WEB_URL: z.url().optional(),
 	EXPO_PUBLIC_DEEP_LINK_SCHEME: z.string().default("superset"),
 	EXPO_PUBLIC_DEEP_LINK_DOMAIN: z.string().optional(),
+	EXPO_PUBLIC_POSTHOG_KEY: z.string(),
+	EXPO_PUBLIC_POSTHOG_HOST: z.url().default("https://us.i.posthog.com"),
 });
 
 export const env = envSchema.parse({
@@ -18,4 +20,6 @@ export const env = envSchema.parse({
 		.EXPO_PUBLIC_DEEP_LINK_SCHEME as unknown,
 	EXPO_PUBLIC_DEEP_LINK_DOMAIN: process.env
 		.EXPO_PUBLIC_DEEP_LINK_DOMAIN as unknown,
+	EXPO_PUBLIC_POSTHOG_KEY: process.env.EXPO_PUBLIC_POSTHOG_KEY as unknown,
+	EXPO_PUBLIC_POSTHOG_HOST: process.env.EXPO_PUBLIC_POSTHOG_HOST as unknown,
 });

apps/mobile/lib/posthog/client.ts

@@ -0,0 +1,10 @@
+import { env } from "../env";
+
+export const posthogConfig = {
+	apiKey: env.EXPO_PUBLIC_POSTHOG_KEY,
+	host: env.EXPO_PUBLIC_POSTHOG_HOST,
+	options: {
+		enableSessionReplay: false,
+		debug: env.NODE_ENV === "development",
+	},
+};

apps/mobile/lib/posthog/index.ts

@@ -0,0 +1 @@
+export { posthogConfig } from "./client";

apps/mobile/package.json

@@ -14,6 +14,7 @@
 	"dependencies": {
 		"@better-auth/expo": "1.4.16",
 		"@electric-sql/client": "https://pkg.pr.new/@electric-sql/client@3724",
+		"@react-native-async-storage/async-storage": "2.2.0",
 		"@react-navigation/native": "^7.1.28",
 		"@rn-primitives/portal": "^1.3.0",
 		"@rn-primitives/slot": "^1.2.0",
@@ -31,17 +32,22 @@
 		"clsx": "^2.1.1",
 		"dotenv": "^17.2.3",
 		"expo": "~54.0.31",
+		"expo-application": "~7.0.8",
 		"expo-constants": "^18.0.13",
 		"expo-crypto": "^15.0.8",
 		"expo-dev-client": "~6.0.20",
+		"expo-device": "~8.0.10",
+		"expo-file-system": "~19.0.21",
 		"expo-linking": "~8.0.11",
+		"expo-localization": "~17.0.8",
 		"expo-network": "~8.0.8",
 		"expo-router": "^6.0.21",
 		"expo-secure-store": "~15.0.8",
 		"expo-status-bar": "^3.0.9",
 		"expo-system-ui": "~6.0.9",
 		"expo-web-browser": "~15.0.10",
 		"lucide-react-native": "^0.562.0",
+		"posthog-react-native": "^4.23.0",
 		"react": "19.1.0",
 		"react-native": "0.81.5",
 		"react-native-get-random-values": "^1.11.0",

apps/mobile/screens/RootLayout/RootLayout.tsx

@@ -0,0 +1,20 @@
+import { PortalHost } from "@rn-primitives/portal";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Stack } from "expo-router";
+
+import { PostHogUserIdentifier } from "./components/PostHogUserIdentifier";
+import { PostHogProvider } from "./providers/PostHogProvider";
+
+const queryClient = new QueryClient();
+
+export function RootLayout() {
+	return (
+		<QueryClientProvider client={queryClient}>
+			<PostHogProvider>
+				<Stack screenOptions={{ headerShown: false }} />
+				<PostHogUserIdentifier />
+				<PortalHost />
+			</PostHogProvider>
+		</QueryClientProvider>
+	);
+}

apps/mobile/screens/RootLayout/components/PostHogUserIdentifier/PostHogUserIdentifier.tsx

@@ -0,0 +1,21 @@
+import { usePostHog } from "posthog-react-native";
+import { useEffect } from "react";
+import { useSession } from "@/lib/auth/client";
+
+export function PostHogUserIdentifier() {
+	const { data: session } = useSession();
+	const posthog = usePostHog();
+
+	useEffect(() => {
+		if (session?.user) {
+			posthog.identify(session.user.id, {
+				email: session.user.email,
+				name: session.user.name,
+			});
+		} else if (session === null) {
+			posthog.reset();
+		}
+	}, [session, posthog]);
+
+	return null;
+}

apps/mobile/screens/RootLayout/components/PostHogUserIdentifier/index.ts

@@ -0,0 +1 @@
+export { PostHogUserIdentifier } from "./PostHogUserIdentifier";

apps/mobile/screens/RootLayout/index.ts

@@ -0,0 +1 @@
+export { RootLayout } from "./RootLayout";

apps/mobile/screens/RootLayout/providers/PostHogProvider/PostHogProvider.tsx

@@ -0,0 +1,53 @@
+import { usePathname } from "expo-router";
+import {
+	PostHogProvider as PHProvider,
+	usePostHog,
+} from "posthog-react-native";
+import { type ReactNode, useEffect, useRef } from "react";
+import { posthogConfig } from "@/lib/posthog";
+
+interface PostHogProviderProps {
+	children: ReactNode;
+}
+
+function PostHogInitializer({ children }: { children: ReactNode }) {
+	const posthog = usePostHog();
+	const pathname = usePathname();
+	const previousPathname = useRef<string | null>(null);
+
+	useEffect(() => {
+		if (posthogConfig.options.debug) {
+			posthog.debug(true);
+		}
+		posthog.register({
+			app_name: "mobile",
+		});
+	}, [posthog]);
+
+	// Track screen views on pathname change
+	useEffect(() => {
+		if (pathname && pathname !== previousPathname.current) {
+			posthog.screen(pathname, { path: pathname });
+			previousPathname.current = pathname;
+		}
+	}, [pathname, posthog]);
+
+	return <>{children}</>;
+}
+
+export function PostHogProvider({ children }: PostHogProviderProps) {
+	return (
+		<PHProvider
+			apiKey={posthogConfig.apiKey}
+			options={{
+				host: posthogConfig.host,
+				enableSessionReplay: posthogConfig.options.enableSessionReplay,
+			}}
+			autocapture={{
+				captureTouches: true,
+			}}
+		>
+			<PostHogInitializer>{children}</PostHogInitializer>
+		</PHProvider>
+	);
+}

apps/mobile/screens/RootLayout/providers/PostHogProvider/index.ts

@@ -0,0 +1 @@
+export { PostHogProvider } from "./PostHogProvider";