Upgrade phone app to Expo SDK 58, tab activities, document scanning

apps/mobile/app.json

@@ -41,7 +41,6 @@
       ]
     },
     "plugins": [
-      "./plugins/with-scene-lifecycle",
       "expo-router",
       [
         "expo-font",
@@ -157,7 +156,10 @@
             "usesCleartextTraffic": true
           }
         }
-      ]
+      ],
+      "expo-image",
+      "expo-localization",
+      "expo-status-bar"
     ],
     "experiments": {
       "typedRoutes": true,

apps/mobile/package.json

@@ -16,51 +16,51 @@
     "@bsky.app/react-native-uitextview": "^2.7.1",
     "@expo-google-fonts/geist": "^0.4.2",
     "@expo-google-fonts/geist-mono": "^0.4.3",
-    "@expo/ui": "~57.0.21",
+    "@expo/ui": "~58.0.26",
     "@expo/vector-icons": "^15.0.2",
-    "@shopify/flash-list": "2.0.2",
+    "@shopify/flash-list": "2.3.2",
     "@tanstack/react-query": "^5.104.1",
     "croner": "^10.0.1",
     "date-fns": "^4.4.0",
-    "expo": "~57.0.26",
-    "expo-build-properties": "~57.0.22",
-    "expo-camera": "~57.0.6",
-    "expo-clipboard": "~57.0.2",
-    "expo-constants": "~57.0.20",
-    "expo-dev-client": "~57.0.19",
-    "expo-device": "~57.0.2",
-    "expo-document-picker": "~57.0.3",
-    "expo-file-system": "~57.0.7",
-    "expo-font": "~57.0.4",
-    "expo-glass-effect": "~57.0.4",
-    "expo-haptics": "~57.0.3",
-    "expo-image": "~57.0.5",
-    "expo-image-picker": "~57.0.20",
-    "expo-linking": "~57.0.11",
-    "expo-local-authentication": "~57.0.3",
-    "expo-localization": "~57.0.2",
-    "expo-router": "~57.0.24",
-    "expo-secure-store": "~57.0.4",
-    "expo-splash-screen": "~57.0.9",
-    "expo-status-bar": "~57.0.1",
-    "expo-symbols": "~57.0.3",
-    "expo-system-ui": "~57.0.4",
+    "expo": "~58.0.22",
+    "expo-build-properties": "~58.0.12",
+    "expo-camera": "~58.0.14",
+    "expo-clipboard": "~58.0.4",
+    "expo-constants": "~58.0.14",
+    "expo-dev-client": "~58.0.18",
+    "expo-device": "~58.0.5",
+    "expo-document-picker": "~58.0.4",
+    "expo-file-system": "~58.0.13",
+    "expo-font": "~58.0.11",
+    "expo-glass-effect": "~58.0.5",
+    "expo-haptics": "~58.0.7",
+    "expo-image": "~58.0.18",
+    "expo-image-picker": "~58.0.10",
+    "expo-linking": "~58.0.15",
+    "expo-local-authentication": "~58.0.2",
+    "expo-localization": "~58.0.5",
+    "expo-router": "~58.0.29",
+    "expo-secure-store": "~58.0.2",
+    "expo-splash-screen": "~58.0.12",
+    "expo-status-bar": "~58.0.4",
+    "expo-symbols": "~58.0.4",
+    "expo-system-ui": "~58.0.7",
     "i18next": "^26.5.12",
     "marked": "^18.0.14",
-    "react": "19.2.3",
+    "react": "19.3.0",
     "react-i18next": "^17.1.9",
-    "react-native": "0.86.3",
-    "react-native-gesture-handler": "~2.32.0",
-    "react-native-keyboard-controller": "1.21.9",
-    "react-native-reanimated": "4.5.1",
-    "react-native-safe-area-context": "~5.7.0",
-    "react-native-screens": "~4.26.0",
-    "react-native-svg": "15.15.4",
-    "react-native-worklets": "0.10.1",
+    "react-native": "0.88.1",
+    "react-native-gesture-handler": "~3.3.0",
+    "react-native-keyboard-controller": "1.22.7",
+    "react-native-reanimated": "4.7.1",
+    "react-native-safe-area-context": "~5.10.1",
+    "react-native-screens": "~4.30.1",
+    "react-native-svg": "15.16.0",
+    "react-native-worklets": "0.13.0",
     "zustand": "^5.0.15"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
+    "@types/react": "~19.3.0",
     "typescript": "~6.0.3"
   }
 }

apps/mobile/src/app/(tabs)/_layout.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { isHumanTaskWaiting } from "@godmode/shared";
-import { NativeTabs } from "expo-router/unstable-native-tabs";
+import { NativeTabs } from "expo-router/native-tabs";
 import { useTranslation } from "react-i18next";
 import { DynamicColorIOS, Platform } from "react-native";
 import { LiveAccessory } from "@/components/live-accessory";
@@ -29,6 +29,7 @@ export default function TabsLayout() {
 
   return (
     <NativeTabs
+      activityEnabled
       tintColor={tint ?? c.text}
       minimizeBehavior="onScrollDown"
       backgroundColor={Platform.OS === "android" ? c.surface : undefined}

apps/mobile/src/app/compose.tsx

@@ -1,6 +1,6 @@
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useRef, useState } from "react";
-import { Alert, Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { Alert, Pressable, ScrollView, StyleSheet, View, type ScrollViewInstance } from "react-native";
 import { useTranslation } from "react-i18next";
 import { CharacterAvatar } from "@/components/character";
 import { Icon } from "@/components/icon";
@@ -42,7 +42,7 @@ export default function Compose() {
   const projectId = projectPick !== undefined ? listed(projectPick) : (listed(scopeProject) ?? listed(current?.projectId));
 
   const composer = useRef<ComposerHandle>(null);
-  const rail = useRef<ScrollView>(null);
+  const rail = useRef<ScrollViewInstance>(null);
   const revealed = useRef(false);
   const choice = useNewChatChoice((s) => s.choice);
   useEffect(() => {

apps/mobile/src/app/live.tsx

@@ -185,7 +185,7 @@ export default function Live() {
         {uri ? (
           <Pressable
             onPress={(e) => press(e, "left")}
-            onLongPress={mac ? (e) => press(e, "right") : null}
+            onLongPress={mac ? (e) => press(e, "right") : undefined}
             delayLongPress={380}
             disabled={!control}
             accessibilityHint={mac ? t("live.controlHintMac") : t("live.controlHint")}

apps/mobile/src/app/memory/[id].tsx

@@ -4,7 +4,7 @@ import * as Haptics from "expo-haptics";
 import { Stack, useLocalSearchParams, useNavigation } from "expo-router";
 import { usePreventRemove } from "expo-router/react-navigation";
 import { useMemo, useRef, useState } from "react";
-import { Alert, Pressable, RefreshControl, ScrollView, StyleSheet, TextInput, View } from "react-native";
+import { Alert, Pressable, RefreshControl, ScrollView, StyleSheet, TextInput, View, type ScrollViewInstance } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTranslation } from "react-i18next";
 import type { Agent, AgentMemory } from "@godmode/shared";
@@ -77,7 +77,7 @@ function MemoryView({ agent, memory, refetch }: { agent: Agent; memory: AgentMem
   const { t } = useTranslation(["memory", "common"]);
   const navigation = useNavigation();
   const pull = usePullRefresh(refetch);
-  const scroll = useRef<ScrollView>(null);
+  const scroll = useRef<ScrollViewInstance>(null);
   const offsets = useRef<number[]>([]);
   const readerY = useRef(0);
   // On iOS the content scrolls under the glass header.

apps/mobile/src/app/my-tasks.tsx

@@ -79,7 +79,7 @@ export default function MyTasks() {
               ) : null}
               {adding ? <AddTask onDone={() => setAdding(false)} /> : null}
             </View>
-          ) : null
+          ) : undefined
         }
         renderSectionHeader={({ section }) => (
           <View style={{ paddingHorizontal: space.sm, paddingTop: space.lg }}>
@@ -95,7 +95,7 @@ export default function MyTasks() {
             </View>
           ) : list.isError ? (
             <ErrorState title={t("myTasks.loadFailed")} error={errorText(list.error)} onRetry={() => void list.refetch()} />
-          ) : adding ? null : (
+          ) : adding ? undefined : (
             <EmptyState
               icon="person"
               title={t("myTasks.emptyTitle")}

apps/mobile/src/components/composer.tsx

@@ -1,7 +1,7 @@
 import { Button as MenuButton, Host, Image as SwiftImage, Menu } from "@expo/ui/swift-ui";
 import { accessibilityLabel, background, contentShape, frame, shapes } from "@expo/ui/swift-ui/modifiers";
 import { useEffect, useImperativeHandle, useMemo, useRef, useState, type ReactNode, type Ref } from "react";
-import { ActivityIndicator, Alert, Pressable, ScrollView, StyleSheet, TextInput, View } from "react-native";
+import { ActivityIndicator, Alert, Pressable, ScrollView, StyleSheet, TextInput, View, type TextInputInstance } from "react-native";
 import { useTranslation } from "react-i18next";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
 import type { SlashCommand } from "@godmode/shared";
@@ -11,7 +11,7 @@ import { Glass } from "./glass";
 import { Icon } from "./icon";
 import { T, tap } from "./ui";
 import { errorText } from "@/lib/api";
-import { addFiles, fromPasted, MAX_FILES, pickFrom, type FileSource, type PendingFile } from "@/lib/attachments";
+import { addFiles, canScanDocuments, chooseCameraMode, fromPasted, MAX_FILES, pickFrom, type FileSource, type PendingFile } from "@/lib/attachments";
 import { findCommand, rankCommands, useDraft, useDrafts, useSlashCommands } from "@/lib/composer";
 import { fonts, radius, space, type, useColors } from "@/lib/theme";
 import { addPasteListener, setPasteActive } from "../../modules/paste-input";
@@ -61,7 +61,7 @@ export function Composer({
 }) {
   const c = useColors();
   const { t: tr } = useTranslation(["components", "common"]);
-  const input = useRef<TextInput>(null);
+  const input = useRef<TextInputInstance>(null);
   const draft = useDraft(draftKey);
   const setDraft = useDrafts((s) => s.set);
   const { text, files } = draft;
@@ -237,7 +237,7 @@ export function ComposerDock({ children }: { children: ReactNode }) {
   return <View style={styles.dock}>{children}</View>;
 }
 
-/** Photos, camera and files: the system menu on iOS, a choice dialog on Android. */
+/** Photos, camera, document scan and files: the system menu on iOS, a choice dialog on Android. */
 function AttachButton({ onPick, disabled }: { onPick: (source: FileSource) => void; disabled?: boolean }) {
   const c = useColors();
   const { t } = useTranslation("components");
@@ -258,6 +258,7 @@ function AttachButton({ onPick, disabled }: { onPick: (source: FileSource) => vo
           >
             <MenuButton label={t("composer.photoLibrary")} systemImage="photo.on.rectangle" onPress={() => onPick("library")} />
             <MenuButton label={t("composer.takePhoto")} systemImage="camera" onPress={() => onPick("camera")} />
+            {canScanDocuments() ? <MenuButton label={t("composer.scanDocument")} systemImage="doc.viewfinder" onPress={() => onPick("scan")} /> : null}
             <MenuButton label={t("composer.chooseFiles")} systemImage="folder" onPress={() => onPick("files")} />
           </Menu>
         </Host>
@@ -273,7 +274,7 @@ function AttachButton({ onPick, disabled }: { onPick: (source: FileSource) => vo
         tap();
         Alert.alert(t("composer.attach"), t("composer.attachMessage"), [
           { text: t("composer.photos"), onPress: () => onPick("library") },
-          { text: t("composer.camera"), onPress: () => onPick("camera") },
+          { text: t("composer.camera"), onPress: () => void chooseCameraMode().then((mode) => mode && onPick(mode)) },
           { text: t("composer.files"), onPress: () => onPick("files") },
         ], { cancelable: true });
       }}

apps/mobile/src/components/live-accessory.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
-import { NativeTabs } from "expo-router/unstable-native-tabs";
+import { NativeTabs } from "expo-router/native-tabs";
 import { Pressable, StyleSheet, View } from "react-native";
 import { useTranslation } from "react-i18next";
 import { CharacterAvatar } from "./character";

apps/mobile/src/components/ui.tsx

@@ -32,7 +32,7 @@ export function T({
   ...props
 }: TextProps & { variant?: Variant; color?: ColorValue; muted?: boolean }) {
   const c = useColors();
-  const flat = StyleSheet.flatten([type[variant] as TextStyle, { color: color ?? (muted ? c.textMuted : c.text) }, style]);
+  const flat: TextStyle = StyleSheet.flatten([type[variant] as TextStyle, { color: color ?? (muted ? c.textMuted : c.text) }, style]) ?? {};
   // iOS Text only copies a whole block; a UITextView lets the human pick a range.
   return <UITextView {...props} uiTextView style={withFont(flat)} />;
 }