Analytics & Privacy

npm install @segment/analytics-react-native @segment/sovran-react-native
# or Amplitude directly:
npm install @amplitude/analytics-react-native
npx expo install expo-tracking-transparency

// src/privacy/consent.ts
import AsyncStorage from "@react-native-async-storage/async-storage";
 
export type ConsentState = {
  analytics: boolean;
  crashReporting: boolean; // often separate - may default on for stability
  marketing: boolean;
  decidedAt: string | null;
};
 
const KEY = "consent_v1";
 
const defaultState: ConsentState = {
  analytics: false,
  crashReporting: true,
  marketing: false,
  decidedAt: null,
};
 
export async function getConsent(): Promise<ConsentState> {
  const raw = await AsyncStorage.getItem(KEY);
  return raw ? JSON.parse(raw) : defaultState;
}
 
export async function setConsent(patch: Partial<ConsentState>) {
  const next = { ...(await getConsent()), ...patch, decidedAt: new Date().toISOString() };
  await AsyncStorage.setItem(KEY, JSON.stringify(next));
  return next;
}

// src/privacy/att.ts
import { Platform } from "react-native";
import * as TrackingTransparency from "expo-tracking-transparency";
 
export async function requestAttIfNeeded() {
  if (Platform.OS !== "ios") return "unavailable";
 
  const { status: existing } = await TrackingTransparency.getTrackingPermissionsAsync();
  if (existing === "granted" || existing === "denied") return existing;
 
  const { status } = await TrackingTransparency.requestTrackingPermissionsAsync();
  return status;
}

// src/analytics/index.ts
import { getConsent } from "@/privacy/consent";
 
type Props = Record<string, string | number | boolean | null>;
 
let segmentClient: { track: (e: string, p?: Props) => void; identify: (id: string, t?: Props) => void; reset: () => void } | null = null;
 
export async function initAnalytics() {
  const consent = await getConsent();
  if (!consent.analytics) return;
 
  const { createClient } = await import("@segment/analytics-react-native");
  segmentClient = createClient({
    writeKey: process.env.EXPO_PUBLIC_SEGMENT_WRITE_KEY!,
    trackAppLifecycleEvents: true,
  });
}
 
export async function track(event: string, properties?: Props) {
  const consent = await getConsent();
  if (!consent.analytics || !segmentClient) return;
  segmentClient.track(event, sanitize(properties));
}
 
export async function identify(userId: string, traits?: Props) {
  const consent = await getConsent();
  if (!consent.analytics || !segmentClient) return;
  segmentClient.identify(userId, sanitize(traits));
}
 
export async function resetAnalytics() {
  segmentClient?.reset();
}
 
function sanitize(props?: Props): Props | undefined {
  if (!props) return props;
  const blocked = ["email", "phone", "name", "address"];
  return Object.fromEntries(
    Object.entries(props).filter(([k]) => !blocked.includes(k.toLowerCase()))
  );
}

// src/privacy/ConsentGate.tsx
import { useEffect, useState } from "react";
import { Button, Text, View } from "react-native";
import { getConsent, setConsent } from "./consent";
import { requestAttIfNeeded } from "./att";
import { initAnalytics } from "@/analytics";
 
export function ConsentGate({ children }: { children: React.ReactNode }) {
  const [ready, setReady] = useState(false);
  const [showBanner, setShowBanner] = useState(false);
 
  useEffect(() => {
    (async () => {
      const consent = await getConsent();
      setShowBanner(!consent.decidedAt);
      if (consent.analytics) await initAnalytics();
      setReady(true);
    })();
  }, []);
 
  if (!ready) return null;
 
  if (showBanner) {
    return (
      <View style={{ padding: 24, gap: 12 }}>
        <Text>We use analytics to improve the app. You can change this in Settings.</Text>
        <Button
          title="Accept analytics"
          onPress={async () => {
            await requestAttIfNeeded();
            await setConsent({ analytics: true });
            await initAnalytics();
            setShowBanner(false);
          }}
        />
        <Button
          title="Decline"
          onPress={async () => {
            await setConsent({ analytics: false });
            setShowBanner(false);
          }}
        />
      </View>
    );
  }
 
  return <>{children}</>;
}

// app.config.ts - declare NSUserTrackingUsageDescription for iOS
export default {
  expo: {
    ios: {
      infoPlist: {
        NSUserTrackingUsageDescription:
          "This identifier helps us measure app performance and improve features.",
      },
    },
  },
};

// app/_layout.tsx
import { Stack } from "expo-router";
import { ConsentGate } from "@/privacy/ConsentGate";
 
export default function RootLayout() {
  return (
    <ConsentGate>
      <Stack />
    </ConsentGate>
  );
}

// src/features/auth/logout.ts
import { resetAnalytics } from "@/analytics";
import * as SecureStore from "expo-secure-store";
 
export async function logout() {
  await SecureStore.deleteItemAsync("refresh_token");
  await resetAnalytics();
  // clear React state, invalidate queries...
}

// Stable event schema - version properties carefully
await track("checkout_completed", {
  order_id: order.id,
  item_count: order.items.length,
  currency: "USD",
  value_cents: order.totalCents,
});

// Amplitude direct (when Segment is not required)
import { init, track, identify, reset } from "@amplitude/analytics-react-native";
 
export async function initAmplitude() {
  await init(process.env.EXPO_PUBLIC_AMPLITUDE_API_KEY!, undefined, {
    trackingOptions: { ipAddress: false },
  });
}