stage 2: skeleton with navigation

js/mobile/babel.config.js

@@ -5,5 +5,6 @@ module.exports = function (api) {
       ["babel-preset-expo", { jsxImportSource: "nativewind" }],
       "nativewind/babel",
     ],
+    plugins: ["react-native-worklets/plugin"],
   };
 };

js/mobile/package.json

@@ -12,26 +12,30 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-navigation/native": "^7.0.14",
+    "@react-navigation/native-stack": "^7.2.0",
     "@tanstack/react-query": "^5.90.21",
     "expo": "~54.0.0",
-    "expo-constants": "~17.0.0",
+    "expo-constants": "~18.0.13",
-    "expo-secure-store": "~14.0.0",
+    "expo-secure-store": "~15.0.8",
-    "expo-status-bar": "~2.0.0",
+    "expo-status-bar": "~3.0.9",
     "nativewind": "^4.1.23",
     "react": "19.1.0",
-    "react-native": "0.81.4",
+    "react-native": "0.81.5",
-    "react-native-gesture-handler": "~2.21.0",
+    "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~4.0.0",
+    "react-native-reanimated": "~4.1.1",
-    "react-native-safe-area-context": "~4.12.0",
+    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.4.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "15.12.1",
+    "react-native-worklets": "0.5.1",
     "sonner-native": "^0.21.0",
     "zod": "^4.3.6",
     "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@types/react": "~19.1.0",
-    "expo-build-properties": "~0.13.0",
+    "expo-build-properties": "~1.0.10",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.9.0"
   }

js/mobile/src/App.tsx

@@ -1,25 +1,34 @@
+import { useEffect } from "react";
 import { StatusBar } from "expo-status-bar";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { Text, View } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { NavigationContainer } from "@react-navigation/native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Toaster } from "sonner-native";
 import { createQueryClient } from "@/lib/query-client";
+import { RootNavigator } from "@/navigation/RootNavigator";
+import { useAuthStore } from "@/stores/auth-store";
 
 const queryClient = createQueryClient();
 
 export default function App() {
+  const restoreSession = useAuthStore((s) => s.restoreSession);
+
+  useEffect(() => {
+    void restoreSession();
+  }, [restoreSession]);
+
   return (
-    <QueryClientProvider client={queryClient}>
+    <GestureHandlerRootView style={{ flex: 1 }}>
-      <SafeAreaProvider>
+      <QueryClientProvider client={queryClient}>
-        <View className="flex-1 items-center justify-center bg-background">
+        <SafeAreaProvider>
-          <Text className="text-foreground text-2xl font-semibold">Flowy</Text>
+          <NavigationContainer>
-          <Text className="text-muted-foreground mt-2">
+            <RootNavigator />
-            Mobile scaffold — step 1
+          </NavigationContainer>
-          </Text>
+          <Toaster />
-        </View>
+          <StatusBar style="auto" />
-        <Toaster />
+        </SafeAreaProvider>
-        <StatusBar style="auto" />
+      </QueryClientProvider>
-      </SafeAreaProvider>
+    </GestureHandlerRootView>
-    </QueryClientProvider>
   );
 }

js/mobile/src/features/auth/SignInScreen.tsx

@@ -0,0 +1,193 @@
+import { useState } from "react";
+import {
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useAuthStore } from "@/stores/auth-store";
+
+type Step = "email" | "code";
+
+export function SignInScreen() {
+  const [step, setStep] = useState<Step>("email");
+  const [email, setEmail] = useState("");
+
+  return (
+    <SafeAreaView className="flex-1 bg-background">
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        className="flex-1"
+      >
+        <View className="flex-1 justify-center px-6">
+          {step === "email" ? (
+            <EmailStep
+              onCodeSent={(submittedEmail) => {
+                setEmail(submittedEmail);
+                setStep("code");
+              }}
+            />
+          ) : (
+            <CodeStep email={email} onBack={() => setStep("email")} />
+          )}
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+function EmailStep({ onCodeSent }: { onCodeSent: (email: string) => void }) {
+  const [email, setEmail] = useState("");
+  const isRequestingCode = useAuthStore((s) => s.isRequestingCode);
+  const error = useAuthStore((s) => s.error);
+  const requestCode = useAuthStore((s) => s.requestCode);
+  const clearError = useAuthStore((s) => s.clearError);
+
+  const submit = async () => {
+    try {
+      await requestCode(email);
+      onCodeSent(email);
+    } catch {
+      // Error surfaced via the store
+    }
+  };
+
+  const disabled = isRequestingCode || email.trim().length === 0;
+
+  return (
+    <View className="gap-5">
+      <View className="gap-1">
+        <Text className="text-foreground text-3xl font-semibold">Sign in</Text>
+        <Text className="text-muted-foreground text-base">
+          Enter your email to receive a sign-in code.
+        </Text>
+      </View>
+
+      <View className="gap-2">
+        <Text className="text-foreground text-sm font-medium">Email</Text>
+        <TextInput
+          value={email}
+          onChangeText={(text) => {
+            setEmail(text);
+            if (error) clearError();
+          }}
+          placeholder="[email protected]"
+          placeholderTextColor="#878787"
+          keyboardType="email-address"
+          autoCapitalize="none"
+          autoCorrect={false}
+          autoComplete="email"
+          textContentType="emailAddress"
+          autoFocus
+          returnKeyType="go"
+          onSubmitEditing={submit}
+          className="border-input text-foreground rounded-lg border bg-background px-4 py-3 text-base"
+        />
+      </View>
+
+      {error ? (
+        <Text className="text-destructive text-sm">{error}</Text>
+      ) : null}
+
+      <Pressable
+        onPress={submit}
+        disabled={disabled}
+        className={`rounded-lg px-4 py-3.5 items-center ${
+          disabled ? "bg-muted" : "bg-primary"
+        }`}
+      >
+        <Text
+          className={`text-base font-semibold ${
+            disabled ? "text-muted-foreground" : "text-primary-foreground"
+          }`}
+        >
+          {isRequestingCode ? "Sending..." : "Continue"}
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+function CodeStep({ email, onBack }: { email: string; onBack: () => void }) {
+  const [code, setCode] = useState("");
+  const isSigningIn = useAuthStore((s) => s.isSigningIn);
+  const error = useAuthStore((s) => s.error);
+  const signIn = useAuthStore((s) => s.signIn);
+  const clearError = useAuthStore((s) => s.clearError);
+
+  const submit = async () => {
+    try {
+      await signIn(email, code);
+    } catch {
+      // Error surfaced via the store; keep the screen visible
+    }
+  };
+
+  const disabled = isSigningIn || code.trim().length === 0;
+
+  return (
+    <View className="gap-5">
+      <View className="gap-1">
+        <Text className="text-foreground text-3xl font-semibold">
+          Check your email
+        </Text>
+        <Text className="text-muted-foreground text-base">
+          We sent a code to{" "}
+          <Text className="text-foreground font-medium">{email}</Text>.
+        </Text>
+      </View>
+
+      <View className="gap-2">
+        <Text className="text-foreground text-sm font-medium">Code</Text>
+        <TextInput
+          value={code}
+          onChangeText={(text) => {
+            setCode(text);
+            if (error) clearError();
+          }}
+          placeholder="Enter code"
+          placeholderTextColor="#878787"
+          keyboardType="number-pad"
+          autoFocus
+          returnKeyType="go"
+          textContentType="oneTimeCode"
+          onSubmitEditing={submit}
+          className="border-input text-foreground rounded-lg border bg-background px-4 py-3 text-base tracking-widest"
+        />
+      </View>
+
+      {error ? (
+        <Text className="text-destructive text-sm">{error}</Text>
+      ) : null}
+
+      <View className="gap-2">
+        <Pressable
+          onPress={submit}
+          disabled={disabled}
+          className={`rounded-lg px-4 py-3.5 items-center ${
+            disabled ? "bg-muted" : "bg-primary"
+          }`}
+        >
+          <Text
+            className={`text-base font-semibold ${
+              disabled ? "text-muted-foreground" : "text-primary-foreground"
+            }`}
+          >
+            {isSigningIn ? "Signing in..." : "Sign in"}
+          </Text>
+        </Pressable>
+        <Pressable
+          onPress={onBack}
+          className="rounded-lg px-4 py-3.5 items-center"
+        >
+          <Text className="text-muted-foreground text-base font-medium">
+            Back
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}

js/mobile/src/features/networks/Drawer.tsx

@@ -0,0 +1,166 @@
+import { useEffect, useRef } from "react";
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  Modal,
+  Pressable,
+  Text,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useAuthStore } from "@/stores/auth-store";
+
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const DRAWER_WIDTH = Math.min(320, Math.round(SCREEN_WIDTH * 0.82));
+const ANIM_MS = 220;
+
+interface DrawerProps {
+  open: boolean;
+  onClose: () => void;
+  onNavigateAccount: () => void;
+  onNavigateSettings: () => void;
+}
+
+export function Drawer({
+  open,
+  onClose,
+  onNavigateAccount,
+  onNavigateSettings,
+}: DrawerProps) {
+  const translateX = useRef(new Animated.Value(-DRAWER_WIDTH)).current;
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(translateX, {
+        toValue: open ? 0 : -DRAWER_WIDTH,
+        duration: ANIM_MS,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+      Animated.timing(backdropOpacity, {
+        toValue: open ? 0.4 : 0,
+        duration: ANIM_MS,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [open, translateX, backdropOpacity]);
+
+  const user = useAuthStore((s) => s.user);
+  const signOut = useAuthStore((s) => s.signOut);
+  const isSigningOut = useAuthStore((s) => s.isSigningOut);
+
+  const initials = user?.email_prefix.slice(0, 2).toUpperCase() ?? "??";
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="none"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <View className="flex-1">
+        <Animated.View
+          pointerEvents={open ? "auto" : "none"}
+          style={{ opacity: backdropOpacity }}
+          className="absolute inset-0 bg-black"
+        >
+          <Pressable className="flex-1" onPress={onClose} />
+        </Animated.View>
+
+        <Animated.View
+          style={{
+            width: DRAWER_WIDTH,
+            transform: [{ translateX }],
+          }}
+          className="absolute left-0 top-0 bottom-0 bg-sidebar"
+        >
+          <SafeAreaView edges={["top", "bottom", "left"]} className="flex-1">
+            <View className="border-sidebar-border border-b px-5 py-5 flex-row items-center gap-3">
+              <View className="bg-sidebar-accent h-10 w-10 items-center justify-center rounded-full">
+                <Text className="text-sidebar-accent-foreground text-sm font-semibold">
+                  {initials}
+                </Text>
+              </View>
+              <View className="flex-1">
+                <Text
+                  className="text-sidebar-foreground text-base font-medium"
+                  numberOfLines={1}
+                >
+                  {user?.email_prefix ?? ""}
+                </Text>
+                <Text
+                  className="text-muted-foreground text-xs"
+                  numberOfLines={1}
+                >
+                  {user?.email ?? ""}
+                </Text>
+              </View>
+            </View>
+
+            <View className="flex-1 py-2">
+              <DrawerRow
+                label="Account"
+                onPress={() => {
+                  onClose();
+                  onNavigateAccount();
+                }}
+              />
+              <DrawerRow
+                label="Settings"
+                onPress={() => {
+                  onClose();
+                  onNavigateSettings();
+                }}
+              />
+            </View>
+
+            <View className="border-sidebar-border border-t px-2 py-2">
+              <DrawerRow
+                label={isSigningOut ? "Signing out..." : "Sign out"}
+                disabled={isSigningOut}
+                onPress={() => {
+                  void signOut();
+                }}
+                tone="destructive"
+              />
+            </View>
+          </SafeAreaView>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+}
+
+function DrawerRow({
+  label,
+  onPress,
+  disabled,
+  tone = "default",
+}: {
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  tone?: "default" | "destructive";
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      className="px-5 py-3 active:bg-sidebar-accent"
+    >
+      <Text
+        className={`text-base font-medium ${
+          tone === "destructive"
+            ? "text-destructive"
+            : "text-sidebar-foreground"
+        } ${disabled ? "opacity-50" : ""}`}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}

js/mobile/src/features/networks/NetworkListScreen.tsx

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  RefreshControl,
+  Text,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import type { Network } from "@/api/types";
+import { useNetworks } from "@/hooks/use-networks";
+import { useAuthStore } from "@/stores/auth-store";
+import { toUserMessage } from "@/lib/errors";
+import type { RootStackScreenProps } from "@/navigation/types";
+import { Drawer } from "./Drawer";
+
+export function NetworkListScreen({
+  navigation,
+}: RootStackScreenProps<"NetworkList">) {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const { data, isLoading, isRefetching, refetch, error } = useNetworks();
+  const user = useAuthStore((s) => s.user);
+  const initials = user?.email_prefix.slice(0, 2).toUpperCase() ?? "??";
+
+  return (
+    <SafeAreaView className="flex-1 bg-background" edges={["top"]}>
+      <View className="flex-row items-center justify-between px-4 py-3 border-b border-border">
+        <Pressable
+          onPress={() => setDrawerOpen(true)}
+          accessibilityLabel="Open menu"
+          className="bg-muted h-9 w-9 items-center justify-center rounded-full"
+        >
+          <Text className="text-muted-foreground text-xs font-semibold">
+            {initials}
+          </Text>
+        </Pressable>
+        <Text className="text-foreground text-base font-semibold">Flowy</Text>
+        <View className="w-9" />
+      </View>
+
+      {isLoading ? (
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator />
+        </View>
+      ) : error ? (
+        <View className="flex-1 items-center justify-center px-6">
+          <Text className="text-destructive text-center">
+            {toUserMessage(error)}
+          </Text>
+          <Pressable onPress={() => refetch()} className="mt-3 px-4 py-2">
+            <Text className="text-foreground font-medium">Retry</Text>
+          </Pressable>
+        </View>
+      ) : !data || data.length === 0 ? (
+        <EmptyState />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={(item) => item.id}
+          contentContainerClassName="p-4 gap-2"
+          refreshControl={
+            <RefreshControl
+              refreshing={isRefetching}
+              onRefresh={() => refetch()}
+            />
+          }
+          renderItem={({ item }) => (
+            <NetworkCard
+              network={item}
+              onPress={() =>
+                navigation.navigate("StreamList", { networkId: item.id })
+              }
+            />
+          )}
+        />
+      )}
+
+      <Drawer
+        open={drawerOpen}
+        onClose={() => setDrawerOpen(false)}
+        onNavigateAccount={() => navigation.navigate("Account")}
+        onNavigateSettings={() => navigation.navigate("Settings")}
+      />
+    </SafeAreaView>
+  );
+}
+
+function NetworkCard({
+  network,
+  onPress,
+}: {
+  network: Network;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      className="bg-card border-border active:bg-accent rounded-lg border px-4 py-4 flex-row items-center justify-between"
+    >
+      <View className="flex-1">
+        <Text className="text-card-foreground text-base font-semibold">
+          {network.name}
+        </Text>
+        <Text className="text-muted-foreground text-sm">
+          {network.humans.length}{" "}
+          {network.humans.length === 1 ? "member" : "members"}
+        </Text>
+      </View>
+      <Text className="text-muted-foreground text-xl">›</Text>
+    </Pressable>
+  );
+}
+
+function EmptyState() {
+  return (
+    <View className="flex-1 items-center justify-center px-6">
+      <Text className="text-foreground text-lg font-medium text-center">
+        You aren't in any networks yet.
+      </Text>
+      <Text className="text-muted-foreground mt-2 text-center">
+        Ask a friend for an invite, or create one on desktop.
+      </Text>
+    </View>
+  );
+}

js/mobile/src/features/settings/AccountScreen.tsx

@@ -0,0 +1,38 @@
+import { Pressable, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useAuthStore } from "@/stores/auth-store";
+import type { RootStackScreenProps } from "@/navigation/types";
+
+export function AccountScreen({ navigation }: RootStackScreenProps<"Account">) {
+  const user = useAuthStore((s) => s.user);
+
+  return (
+    <SafeAreaView className="flex-1 bg-background" edges={["top"]}>
+      <View className="flex-row items-center px-3 py-3 border-b border-border">
+        <Pressable onPress={() => navigation.goBack()} className="px-2 py-1">
+          <Text className="text-foreground text-2xl">‹</Text>
+        </Pressable>
+        <Text className="flex-1 text-center text-foreground text-base font-semibold">
+          Account
+        </Text>
+        <View className="w-8" />
+      </View>
+
+      <View className="px-6 py-6 gap-4">
+        <Field label="Email" value={user?.email ?? "—"} />
+        <Field label="Account ID" value={user?.id ?? "—"} />
+      </View>
+    </SafeAreaView>
+  );
+}
+
+function Field({ label, value }: { label: string; value: string }) {
+  return (
+    <View className="gap-1">
+      <Text className="text-muted-foreground text-xs uppercase tracking-wide">
+        {label}
+      </Text>
+      <Text className="text-foreground text-base">{value}</Text>
+    </View>
+  );
+}

js/mobile/src/features/settings/SettingsScreen.tsx

@@ -0,0 +1,27 @@
+import { Pressable, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import type { RootStackScreenProps } from "@/navigation/types";
+
+export function SettingsScreen({
+  navigation,
+}: RootStackScreenProps<"Settings">) {
+  return (
+    <SafeAreaView className="flex-1 bg-background" edges={["top"]}>
+      <View className="flex-row items-center px-3 py-3 border-b border-border">
+        <Pressable onPress={() => navigation.goBack()} className="px-2 py-1">
+          <Text className="text-foreground text-2xl">‹</Text>
+        </Pressable>
+        <Text className="flex-1 text-center text-foreground text-base font-semibold">
+          Settings
+        </Text>
+        <View className="w-8" />
+      </View>
+
+      <View className="flex-1 items-center justify-center px-6">
+        <Text className="text-muted-foreground text-center">
+          Theme, notifications, and account preferences land here later.
+        </Text>
+      </View>
+    </SafeAreaView>
+  );
+}

js/mobile/src/features/stream-view/StreamViewScreen.tsx

@@ -0,0 +1,17 @@
+import { Pressable, Text, View } from "react-native";
+import type { RootStackScreenProps } from "@/navigation/types";
+
+export function StreamViewScreen({
+  navigation,
+}: RootStackScreenProps<"StreamView">) {
+  return (
+    <View className="flex-1 bg-black items-center justify-center">
+      <Text className="text-white text-base">
+        Stream view — coming in step 4.
+      </Text>
+      <Pressable onPress={() => navigation.goBack()} className="mt-6 px-4 py-2">
+        <Text className="text-white/70">Close</Text>
+      </Pressable>
+    </View>
+  );
+}

js/mobile/src/features/streams/StreamListScreen.tsx

@@ -0,0 +1,34 @@
+import { Pressable, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useNetwork } from "@/hooks/use-networks";
+import type { RootStackScreenProps } from "@/navigation/types";
+
+export function StreamListScreen({
+  route,
+  navigation,
+}: RootStackScreenProps<"StreamList">) {
+  const network = useNetwork(route.params.networkId);
+
+  return (
+    <SafeAreaView className="flex-1 bg-background" edges={["top"]}>
+      <View className="flex-row items-center px-3 py-3 border-b border-border">
+        <Pressable onPress={() => navigation.goBack()} className="px-2 py-1">
+          <Text className="text-foreground text-2xl">‹</Text>
+        </Pressable>
+        <Text
+          className="flex-1 text-center text-foreground text-base font-semibold"
+          numberOfLines={1}
+        >
+          {network?.name ?? "Streams"}
+        </Text>
+        <View className="w-8" />
+      </View>
+
+      <View className="flex-1 items-center justify-center px-6">
+        <Text className="text-muted-foreground text-center">
+          Stream list — coming in step 3.
+        </Text>
+      </View>
+    </SafeAreaView>
+  );
+}

js/mobile/src/hooks/use-networks.ts

@@ -0,0 +1,23 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "@/api/client";
+import { useAuthStore } from "@/stores/auth-store";
+
+export function useNetworks() {
+  return useQuery({
+    queryKey: ["networks"],
+    queryFn: () => apiClient.listNetworks(),
+    meta: { toastOnError: true },
+  });
+}
+
+export function useNetwork(networkId: string) {
+  const { data: networks } = useNetworks();
+  return networks?.find((n) => n.id === networkId) ?? null;
+}
+
+export function useIsNetworkAdmin(networkId: string): boolean {
+  const network = useNetwork(networkId);
+  const userId = useAuthStore((s) => s.user?.id);
+  if (!network || !userId) return false;
+  return network.admin_human.id === userId;
+}

js/mobile/src/navigation/RootNavigator.tsx

@@ -0,0 +1,49 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { ActivityIndicator, View } from "react-native";
+import { useAuthStore } from "@/stores/auth-store";
+import { SignInScreen } from "@/features/auth/SignInScreen";
+import { NetworkListScreen } from "@/features/networks/NetworkListScreen";
+import { StreamListScreen } from "@/features/streams/StreamListScreen";
+import { StreamViewScreen } from "@/features/stream-view/StreamViewScreen";
+import { SettingsScreen } from "@/features/settings/SettingsScreen";
+import { AccountScreen } from "@/features/settings/AccountScreen";
+import type { RootStackParamList } from "./types";
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+export function RootNavigator() {
+  const status = useAuthStore((s) => s.status);
+
+  if (status === "idle" || status === "restoring") {
+    return (
+      <View className="flex-1 items-center justify-center bg-background">
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  if (status === "unauthenticated") {
+    return (
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="SignIn" component={SignInScreen} />
+      </Stack.Navigator>
+    );
+  }
+
+  return (
+    <Stack.Navigator
+      initialRouteName="NetworkList"
+      screenOptions={{ headerShown: false }}
+    >
+      <Stack.Screen name="NetworkList" component={NetworkListScreen} />
+      <Stack.Screen name="StreamList" component={StreamListScreen} />
+      <Stack.Screen
+        name="StreamView"
+        component={StreamViewScreen}
+        options={{ animation: "fade", gestureEnabled: false }}
+      />
+      <Stack.Screen name="Settings" component={SettingsScreen} />
+      <Stack.Screen name="Account" component={AccountScreen} />
+    </Stack.Navigator>
+  );
+}

js/mobile/src/navigation/types.ts

@@ -0,0 +1,21 @@
+import type { NativeStackScreenProps } from "@react-navigation/native-stack";
+
+// Pure stack model from PRD §5. Drawer affordance lives inside the
+// NetworkList screen itself, not the navigator — see Drawer.tsx.
+export type RootStackParamList = {
+  SignIn: undefined;
+  NetworkList: undefined;
+  StreamList: { networkId: string };
+  StreamView: { networkId: string; streamId: string };
+  Settings: undefined;
+  Account: undefined;
+};
+
+export type RootStackScreenProps<T extends keyof RootStackParamList> =
+  NativeStackScreenProps<RootStackParamList, T>;
+
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends RootStackParamList {}
+  }
+}

js/mobile/src/stores/auth-store.ts

@@ -0,0 +1,126 @@
+import { create } from "zustand";
+import { apiClient } from "@/api/client";
+import type { Human } from "@/api/types";
+import { logError, ApiError } from "@/lib/errors";
+import { hydrateSession, useSessionStore } from "./session-store";
+
+// TODO(step-3): once @react-native-firebase/auth lands, mirror desktop's
+// signInToFirebase() — fetch /auth/firebase-token then signInWithCustomToken.
+// Until then, Firestore reads will fail with permission errors; mobile only
+// uses Orion REST until that wiring exists.
+async function signInToFirebase(): Promise<void> {
+  return;
+}
+
+type AuthStatus = "idle" | "restoring" | "unauthenticated" | "authenticated";
+
+interface AuthState {
+  status: AuthStatus;
+  user: Human | null;
+  isRequestingCode: boolean;
+  isSigningIn: boolean;
+  isSigningOut: boolean;
+  error: string | null;
+  restoreSession: () => Promise<void>;
+  requestCode: (email: string) => Promise<void>;
+  signIn: (email: string, code: string) => Promise<void>;
+  signOut: () => Promise<void>;
+  clearError: () => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  status: "idle",
+  user: null,
+  isRequestingCode: false,
+  isSigningIn: false,
+  isSigningOut: false,
+  error: null,
+
+  restoreSession: async () => {
+    set({ status: "restoring" });
+    if (!useSessionStore.getState().hydrated) {
+      await hydrateSession();
+    }
+
+    const token = useSessionStore.getState().token;
+    if (!token) {
+      set({ status: "unauthenticated" });
+      return;
+    }
+
+    try {
+      const user = await apiClient.me();
+      await signInToFirebase();
+      set({ status: "authenticated", user });
+    } catch (err) {
+      // Expected on expired/invalid tokens — fall back to the login screen.
+      logError(err, { scope: "auth.restore" });
+      await useSessionStore.getState().clearToken();
+      set({ status: "unauthenticated", user: null });
+    }
+  },
+
+  requestCode: async (email: string) => {
+    set({ isRequestingCode: true, error: null });
+    try {
+      await apiClient.requestCode({ email });
+    } catch (e) {
+      const message =
+        e instanceof ApiError ? e.message : "Failed to send code";
+      set({ error: message });
+      throw e;
+    } finally {
+      set({ isRequestingCode: false });
+    }
+  },
+
+  signIn: async (email: string, code: string) => {
+    set({ isSigningIn: true, error: null });
+    try {
+      const { human, token } = await apiClient.signIn({ email, code });
+      await useSessionStore.getState().setToken(token);
+      await signInToFirebase();
+      set({ status: "authenticated", user: human });
+    } catch (e) {
+      const message = e instanceof ApiError ? e.message : "Failed to sign in";
+      set({ error: message });
+      throw e;
+    } finally {
+      set({ isSigningIn: false });
+    }
+  },
+
+  signOut: async () => {
+    set({ isSigningOut: true });
+    try {
+      await apiClient.signOut();
+    } catch (err) {
+      // Best-effort — sign out locally regardless.
+      logError(err, { scope: "auth.signOut" });
+    } finally {
+      await useSessionStore.getState().clearToken();
+      set({
+        status: "unauthenticated",
+        user: null,
+        isSigningOut: false,
+        error: null,
+      });
+    }
+  },
+
+  clearError: () => set({ error: null }),
+}));
+
+// React to token being cleared externally (e.g. 401 from API client).
+useSessionStore.subscribe((state, prevState) => {
+  if (prevState.token && !state.token) {
+    const authState = useAuthStore.getState();
+    if (authState.status === "authenticated") {
+      useAuthStore.setState({
+        status: "unauthenticated",
+        user: null,
+        error: null,
+      });
+    }
+  }
+});

js/mobile/tsconfig.json

@@ -4,16 +4,20 @@
     "strict": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": [
+        "src/*"
+      ]
     },
-    "types": ["nativewind/types"]
+    "types": [
+      "nativewind/types"
+    ]
   },
   "include": [
     "**/*.ts",
     "**/*.tsx",
-    ".expo/types/**/*.ts",
-    "expo-env.d.ts",
     "nativewind-env.d.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }