qd

keystone-app/app/(tabs)/index.tsx

@@ -26,9 +26,8 @@ import { format, isToday, isYesterday } from 'date-fns';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { SYNC_ON_CELLULAR_KEY } from './settings';
+import { runSyncCycle } from '../utils/syncManager';
 
-const BACKEND_URL = 'https://dpv007-keystone.hf.space';
-const MOCK_TOKEN = 'mock-jwt-token-xyz123';
 const SYNCED_ASSETS_KEY = '@synced_assets_v2';
 
 const { width, height } = Dimensions.get('window');
@@ -182,72 +181,37 @@ export default function PhotosScreen() {
     } catch { return []; }
   };
 
-  const addSyncedId = async (id: string, list: string[]): Promise<string[]> => {
-    const next = [...list, id];
-    try { await AsyncStorage.setItem(SYNCED_ASSETS_KEY, JSON.stringify(next)); } catch { }
-    return next;
-  };
-
   const syncAssets = async () => {
-    if (allAssets.length === 0 || isSyncing) return;
+    if (isSyncing || itemsToBackup === 0) return;
     
-    if (!netInfo?.isConnected) {
-      Alert.alert('Offline', 'Connect to the internet to backup your photos.');
-      return;
-    }
-    
-    if (netInfo?.type === Network.NetworkStateType.CELLULAR && !allowCellular) {
-      Alert.alert('Waiting for Wi-Fi', 'Syncing on mobile data is disabled in Settings.');
-      return;
-    }
-
     setIsSyncing(true);
     setSyncStatus('syncing');
-    let synced = await getSyncedList();
-    const toSync = allAssets.filter(a => !synced.includes(a.id));
-    
-    if (!toSync.length) {
-      setIsSyncing(false);
-      setSyncStatus('done');
-      setItemsToBackup(0);
-      setTimeout(() => setSyncStatus('idle'), 3000);
-      return;
-    }
-
-    setSyncTotal(toSync.length);
+    setSyncTotal(itemsToBackup);
     setSyncProgress(0);
-    let ok = 0;
 
-    for (let i = 0; i < toSync.length; i++) {
-      setSyncProgress(i + 1);
-      const asset = toSync[i];
-      try {
-        const info = await MediaLibrary.getAssetInfoAsync(asset);
-        const localUri = info.localUri || asset.uri;
-        const resp = await FileSystem.uploadAsync(`${BACKEND_URL}/upload?token=${MOCK_TOKEN}`, localUri, {
-          fieldName: 'file',
-          httpMethod: 'POST',
-          uploadType: FileSystem.FileSystemUploadType.MULTIPART,
-          parameters: { creation_time: asset.creationTime.toString() },
-          headers: { authorization: `Bearer ${MOCK_TOKEN}` },
-        });
-        if (resp.status === 200) {
-          synced = await addSyncedId(asset.id, synced);
-          ok++;
-          setItemsToBackup(prev => Math.max(0, prev - 1));
-        }
-      } catch (e) {
-        console.error('Upload error', e);
-        // If upload fails, we stop the sync to wait for better network
-        Alert.alert('Sync Interrupted', 'Could not connect to KeyStone backend.');
-        break;
+    const success = await runSyncCycle({
+      onProgress: (current, total) => {
+        setSyncProgress(current);
+      },
+      onStatusChange: (status, itemsLeft) => {
+        setSyncStatus(status);
+        setItemsToBackup(itemsLeft);
+      },
+      onInterrupted: (reason) => {
+        Alert.alert('Sync Interrupted', reason);
+        setIsSyncing(false);
+        setSyncStatus('idle');
+      }
+    });
+
+    if (success) {
+      setIsSyncing(false);
+      if (itemsToBackup === 0) {
+        setSyncStatus('done');
+        setTimeout(() => setSyncStatus('idle'), 4000);
+      } else {
+        setSyncStatus('idle');
       }
-    }
-    
-    setIsSyncing(false);
-    setSyncStatus(ok === toSync.length ? 'done' : 'idle');
-    if (ok === toSync.length) {
-      setTimeout(() => setSyncStatus('idle'), 4000);
     }
   };
 

keystone-app/app/(tabs)/settings.tsx

@@ -4,11 +4,13 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { StatusBar } from 'expo-status-bar';
 import { MaterialIcons } from '@expo/vector-icons';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { BACKGROUND_SYNC_ENABLED_KEY } from '../utils/syncManager';
 
 export const SYNC_ON_CELLULAR_KEY = '@setting_sync_cellular';
 
 export default function SettingsScreen() {
   const [syncOnCellular, setSyncOnCellular] = useState(false);
+  const [bgSync, setBgSync] = useState(true); // Default to true if not set
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -17,9 +19,18 @@ export default function SettingsScreen() {
 
   const loadSettings = async () => {
     try {
-      const val = await AsyncStorage.getItem(SYNC_ON_CELLULAR_KEY);
-      if (val !== null) {
-        setSyncOnCellular(val === 'true');
+      const [cellVal, bgVal] = await Promise.all([
+        AsyncStorage.getItem(SYNC_ON_CELLULAR_KEY),
+        AsyncStorage.getItem(BACKGROUND_SYNC_ENABLED_KEY)
+      ]);
+      
+      if (cellVal !== null) setSyncOnCellular(cellVal === 'true');
+      
+      // If background sync is not set, default to true
+      if (bgVal !== null) {
+        setBgSync(bgVal === 'true');
+      } else {
+        await AsyncStorage.setItem(BACKGROUND_SYNC_ENABLED_KEY, 'true');
       }
     } catch (e) {
       console.error('Failed to load settings', e);
@@ -37,6 +48,15 @@ export default function SettingsScreen() {
     }
   };
 
+  const toggleBgSync = async (value: boolean) => {
+    setBgSync(value);
+    try {
+      await AsyncStorage.setItem(BACKGROUND_SYNC_ENABLED_KEY, value.toString());
+    } catch (e) {
+      console.error('Failed to save setting', e);
+    }
+  };
+
   if (Platform.OS === 'web') {
     return (
       <View style={styles.center}>
@@ -58,6 +78,26 @@ export default function SettingsScreen() {
         <View style={styles.settingsList}>
           <Text style={styles.sectionHeader}>Sync & Backup</Text>
           
+          <View style={styles.settingItem}>
+            <View style={styles.settingLeft}>
+              <View style={styles.iconBox}>
+                <MaterialIcons name="cloud-sync" size={24} color="#1a73e8" />
+              </View>
+              <View>
+                <Text style={styles.settingLabel}>Background Backup</Text>
+                <Text style={styles.settingDesc}>Upload photos quietly while the app is closed.</Text>
+              </View>
+            </View>
+            <Switch
+              trackColor={{ false: '#d1d1d6', true: '#1a73e8' }}
+              thumbColor={Platform.OS === 'ios' ? '#fff' : bgSync ? '#fff' : '#f4f3f4'}
+              onValueChange={toggleBgSync}
+              value={bgSync}
+            />
+          </View>
+          
+          <View style={styles.settingDivider} />
+
           <View style={styles.settingItem}>
             <View style={styles.settingLeft}>
               <View style={styles.iconBox}>
@@ -94,6 +134,7 @@ const styles = StyleSheet.create({
   sectionHeader: { fontSize: 13, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 1, color: '#5f6368', paddingHorizontal: 16, paddingTop: 16, paddingBottom: 8 },
   
   settingItem: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 16 },
+  settingDivider: { height: StyleSheet.hairlineWidth, backgroundColor: '#e0e0e0', marginLeft: 72 },
   settingLeft: { flexDirection: 'row', alignItems: 'center', flex: 1, paddingRight: 16 },
   iconBox: { width: 40, height: 40, borderRadius: 20, backgroundColor: '#e8f0fe', justifyContent: 'center', alignItems: 'center', marginRight: 16 },
   settingLabel: { fontSize: 16, fontWeight: '600', color: '#202124' },

keystone-app/app/_layout.tsx

@@ -1,7 +1,28 @@
 import { Stack } from 'expo-router';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import * as BackgroundFetch from 'expo-background-fetch';
+import { useEffect } from 'react';
+
+// Import syncManager to ensure TaskManager.defineTask is called in the global scope
+import { BACKGROUND_SYNC_TASK } from './utils/syncManager';
 
 export default function Layout() {
+  useEffect(() => {
+    // Register the background fetch task with the OS
+    const registerTask = async () => {
+      try {
+        await BackgroundFetch.registerTaskAsync(BACKGROUND_SYNC_TASK, {
+          minimumInterval: 60 * 15, // 15 minutes
+          stopOnTerminate: false, // Android only
+          startOnBoot: true, // Android only
+        });
+      } catch (err) {
+        console.warn('Background fetch failed to register:', err);
+      }
+    };
+    registerTask();
+  }, []);
+
   return (
     <SafeAreaProvider>
       <Stack>

keystone-app/app/utils/syncManager.ts

@@ -0,0 +1,139 @@
+import * as TaskManager from 'expo-task-manager';
+import * as BackgroundFetch from 'expo-background-fetch';
+import * as MediaLibrary from 'expo-media-library';
+import * as FileSystem from 'expo-file-system/legacy';
+import * as Network from 'expo-network';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { SYNC_ON_CELLULAR_KEY } from '../(tabs)/settings';
+
+export const BACKGROUND_SYNC_TASK = 'BACKGROUND_SYNC_TASK';
+export const BACKGROUND_SYNC_ENABLED_KEY = '@setting_background_sync';
+
+const BACKEND_URL = 'https://dpv007-keystone.hf.space';
+const MOCK_TOKEN = 'mock-jwt-token-xyz123';
+const SYNCED_ASSETS_KEY = '@synced_assets_v2';
+
+export type SyncCallbacks = {
+  onProgress?: (current: number, total: number) => void;
+  onStatusChange?: (status: 'idle' | 'syncing' | 'done', itemsLeft: number) => void;
+  onInterrupted?: (reason: string) => void;
+};
+
+const getSyncedList = async (): Promise<string[]> => {
+  try {
+    const v = await AsyncStorage.getItem(SYNCED_ASSETS_KEY);
+    return v ? JSON.parse(v) : [];
+  } catch {
+    return [];
+  }
+};
+
+const addSyncedId = async (id: string, list: string[]): Promise<string[]> => {
+  const next = [...list, id];
+  try {
+    await AsyncStorage.setItem(SYNCED_ASSETS_KEY, JSON.stringify(next));
+  } catch {}
+  return next;
+};
+
+/**
+ * Core sync logic used by both foreground UI and background fetch.
+ */
+export const runSyncCycle = async (callbacks?: SyncCallbacks) => {
+  // 1. Check network
+  const netInfo = await Network.getNetworkStateAsync();
+  if (!netInfo.isConnected) {
+    callbacks?.onInterrupted?.('Offline');
+    return false;
+  }
+
+  // 2. Check cellular settings
+  if (netInfo.type === Network.NetworkStateType.CELLULAR) {
+    const syncOnCellular = await AsyncStorage.getItem(SYNC_ON_CELLULAR_KEY);
+    if (syncOnCellular !== 'true') {
+      callbacks?.onInterrupted?.('Waiting for Wi-Fi');
+      return false;
+    }
+  }
+
+  // 3. Fetch assets
+  let media: MediaLibrary.PagedInfo<MediaLibrary.Asset>;
+  try {
+    // For background sync, we might not have permissions (though usually we do if UI was opened)
+    const perms = await MediaLibrary.getPermissionsAsync();
+    if (!perms.granted) {
+      callbacks?.onInterrupted?.('No permissions');
+      return false;
+    }
+
+    media = await MediaLibrary.getAssetsAsync({
+      first: 800,
+      sortBy: [MediaLibrary.SortBy.creationTime],
+      mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
+    });
+  } catch (e) {
+    callbacks?.onInterrupted?.('Media Library Error');
+    return false;
+  }
+
+  // 4. Determine what needs syncing
+  let synced = await getSyncedList();
+  const toSync = media.assets.filter(a => !synced.includes(a.id));
+
+  if (!toSync.length) {
+    callbacks?.onStatusChange?.('done', 0);
+    return true; // Nothing to sync
+  }
+
+  callbacks?.onStatusChange?.('syncing', toSync.length);
+  let ok = 0;
+
+  // 5. Upload loop
+  for (let i = 0; i < toSync.length; i++) {
+    callbacks?.onProgress?.(i + 1, toSync.length);
+    const asset = toSync[i];
+    try {
+      const info = await MediaLibrary.getAssetInfoAsync(asset);
+      const localUri = info.localUri || asset.uri;
+      
+      const resp = await FileSystem.uploadAsync(`${BACKEND_URL}/upload?token=${MOCK_TOKEN}`, localUri, {
+        fieldName: 'file',
+        httpMethod: 'POST',
+        uploadType: FileSystem.FileSystemUploadType.MULTIPART,
+        parameters: { creation_time: asset.creationTime.toString() },
+        headers: { authorization: `Bearer ${MOCK_TOKEN}` },
+      });
+      
+      if (resp.status === 200 || resp.status === 201) {
+        synced = await addSyncedId(asset.id, synced);
+        ok++;
+        callbacks?.onStatusChange?.('syncing', toSync.length - ok);
+      }
+    } catch (e) {
+      console.error('Upload error', e);
+      callbacks?.onInterrupted?.('Sync Interrupted');
+      return false; // Stop sync on failure to preserve battery/retries
+    }
+  }
+
+  callbacks?.onStatusChange?.('done', 0);
+  return true;
+};
+
+// ─── Background Task Definition ─────────────────────────────────────
+TaskManager.defineTask(BACKGROUND_SYNC_TASK, async () => {
+  try {
+    const isBgSyncEnabled = await AsyncStorage.getItem(BACKGROUND_SYNC_ENABLED_KEY);
+    if (isBgSyncEnabled !== 'true') {
+      return BackgroundFetch.BackgroundFetchResult.NoData;
+    }
+
+    const success = await runSyncCycle();
+    return success 
+      ? BackgroundFetch.BackgroundFetchResult.NewData 
+      : BackgroundFetch.BackgroundFetchResult.Failed;
+  } catch (error) {
+    console.error('Background sync failed:', error);
+    return BackgroundFetch.BackgroundFetchResult.Failed;
+  }
+});

keystone-app/package-lock.json

@@ -14,6 +14,7 @@
         "date-fns": "^4.4.0",
         "expo": "^54.0.36",
         "expo-av": "~16.0.8",
+        "expo-background-fetch": "~14.0.9",
         "expo-dev-client": "~6.0.21",
         "expo-file-system": "~19.0.23",
         "expo-font": "~14.0.12",
@@ -24,6 +25,7 @@
         "expo-router": "~6.0.24",
         "expo-sharing": "~14.0.8",
         "expo-status-bar": "~3.0.9",
+        "expo-task-manager": "~14.0.9",
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-native": "0.81.5",
@@ -4512,6 +4514,18 @@
         }
       }
     },
+    "node_modules/expo-background-fetch": {
+      "version": "14.0.9",
+      "resolved": "https://registry.npmjs.org/expo-background-fetch/-/expo-background-fetch-14.0.9.tgz",
+      "integrity": "sha512-IhdbjIu9EdsYaL7mCCvf/i48Qy4a5rpRy038/4KNUoa9xmsETRwFCdsoZj4VHg4dVt2D0kiDrgqVVlPBSSWt+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "expo-task-manager": "~14.0.9"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-constants": {
       "version": "18.0.13",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-18.0.13.tgz",
@@ -5056,6 +5070,19 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-task-manager": {
+      "version": "14.0.9",
+      "resolved": "https://registry.npmjs.org/expo-task-manager/-/expo-task-manager-14.0.9.tgz",
+      "integrity": "sha512-GKWtXrkedr4XChHfTm5IyTcSfMtCPxzx89y4CMVqKfyfROATibrE/8UI5j7UC/pUOfFoYlQvulQEvECMreYuUA==",
+      "license": "MIT",
+      "dependencies": {
+        "unimodules-app-loader": "~6.0.8"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-updates-interface": {
       "version": "2.0.0",
       "license": "MIT",
@@ -8929,6 +8956,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/unimodules-app-loader": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/unimodules-app-loader/-/unimodules-app-loader-6.0.8.tgz",
+      "integrity": "sha512-fqS8QwT/MC/HAmw1NKCHdzsPA6WaLm0dNmoC5Pz6lL+cDGYeYCNdHMO9fy08aL2ZD7cVkNM0pSR/AoNRe+rslA==",
+      "license": "MIT"
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "license": "MIT",

keystone-app/package.json

@@ -9,6 +9,7 @@
     "date-fns": "^4.4.0",
     "expo": "^54.0.36",
     "expo-av": "~16.0.8",
+    "expo-background-fetch": "~14.0.9",
     "expo-dev-client": "~6.0.21",
     "expo-file-system": "~19.0.23",
     "expo-font": "~14.0.12",
@@ -19,6 +20,7 @@
     "expo-router": "~6.0.24",
     "expo-sharing": "~14.0.8",
     "expo-status-bar": "~3.0.9",
+    "expo-task-manager": "~14.0.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",