@sqliteai/todoapp 1.0.0

package/.env.example

@@ -0,0 +1,3 @@
+# Copy from the SQLite Cloud Dashboard
+# eg: sqlitecloud://myhost.cloud:8860/my-remote-database.sqlite?apikey=myapikey
+CONNECTION_STRING = "<your-connection-string>"

package/App.js

@@ -0,0 +1,32 @@
+import { PaperProvider } from "react-native-paper";
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import Cover from "./screens/Cover";
+import Home from "./screens/Home";
+import AddTaskModal from "./components/AddTaskModal";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import Categories from './screens/Categories';
+import { SyncProvider } from './components/SyncContext';
+
+export default function App() {
+  const Stack = createStackNavigator();
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <SyncProvider>
+        <NavigationContainer>
+          <PaperProvider>
+            <Stack.Navigator>
+              <Stack.Screen name="Cover" component={Cover} />
+              <Stack.Screen name="Categories" component={Categories} />
+              <Stack.Screen name="Tasks" component={Home} />
+              <Stack.Group screenOptions={{ presentation: 'modal' }}>
+                <Stack.Screen name="Add Task" component={AddTaskModal} />
+              </Stack.Group>
+            </Stack.Navigator>
+          </PaperProvider>
+        </NavigationContainer>
+      </SyncProvider>
+    </GestureHandlerRootView>
+  );
+}

package/README.md

@@ -0,0 +1,52 @@
+# Expo CloudSync Example
+
+A simple Expo example demonstrating SQLite synchronization with CloudSync. Build cross-platform apps that sync data seamlessly across devices.
+
+## 🚀 Quick Start
+
+### 1. Clone the template
+
+Create a new project using this template:
+```bash
+npx create-expo-app MyApp --template @sqliteai/todoapp
+cd MyApp
+npm install
+```
+
+### 2. Database Setup
+
+1. Create database in [SQLite Cloud Dashboard](https://dashboard.sqlitecloud.io/).
+2. Execute the exact schema from `to-do-app.sql`.  
+3. Enable OffSync for all tables on the remote database from the **SQLite Cloud Dashboard -> Databases**.
+
+### 3. Environment Configuration
+
+Rename the `.env.example` into `.env` and fill with your values.
+
+> **⚠️ SECURITY WARNING**: This example puts database connection strings directly in `.env` files for demonstration purposes only. **Do not use this pattern in production.** 
+>
+> **Why this is unsafe:**
+> - Connection strings contain sensitive credentials
+> - Client-side apps expose all environment variables to users
+> - Anyone can inspect your app and extract database credentials
+>
+> **For production apps:**
+> - Use the secure [sport-tracker-app](https://github.com/sqliteai/sqlite-sync/tree/main/examples/sport-tracker-app) pattern with authentication tokens and row-level security
+> - Never embed database credentials in client applications
+
+### 4. Build and run the App
+
+```bash
+npx expo prebuild # run once
+npm start
+```
+
+## ✨ Features
+
+- **Add Tasks** - Create new tasks with titles and optional tags.
+- **Edit Task Status** - Update task status when completed.
+- **Delete Tasks** - Remove tasks from your list.
+- **Dropdown Menu** - Select categories for tasks from a predefined list.
+- **Cross-Platform** - Works on iOS and Android
+- **Offline Support** - Works offline, syncs when connection returns
+

package/app.json

@@ -0,0 +1,39 @@
+{
+  "expo": {
+    "name": "todoapp",
+    "slug": "todoapp",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "description": "A todo app demonstrating SQLite CloudSync extension functionalities",
+    "keywords": ["sqlite", "cloudsync", "todo", "sync"],
+    "privacy": "public",
+    "platforms": ["ios", "android"],
+    "plugins": [
+      "./plugins/CloudSyncSetup.js"
+    ],
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "ai.sqlite.todoapp"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "ai.sqlite.todoapp"
+    },
+    "extra": {
+      "eas": {
+        "projectId": "faffd54b-fc15-4368-987a-a73b08640cfd"
+      }
+    },
+    "owner": "sqliteai"
+  }
+}

package/babel.config.js

@@ -0,0 +1,16 @@
+module.exports = function (api) {
+  api.cache(false);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: [
+      "react-native-paper/babel",
+      [
+        "module:react-native-dotenv",
+        {
+          moduleName: "@env",
+          path: ".env",
+        },
+      ],
+    ],
+  };
+};

package/components/AddTaskModal.js

@@ -0,0 +1,120 @@
+import { useState, useEffect } from "react";
+import { View, StyleSheet, Alert } from "react-native";
+import { TextInput, Button, Modal } from "react-native-paper";
+import DropdownMenu from "./DropdownMenu";
+import { db } from "../db/dbConnection";
+
+export default AddTaskModal = ({
+  modalVisible,
+  addTaskTag,
+  setModalVisible,
+}) => {
+  const [taskTitle, setTaskTitle] = useState("");
+  const [tagsList, setTagsList] = useState([]);
+  const [selectedTag, setSelectedTag] = useState({});
+
+  const closeModal = () => {
+    setModalVisible(false);
+  };
+
+  const handleAddTask = () => {
+    if (taskTitle.trim()) {
+      addTaskTag({ title: taskTitle.trim(), isCompleted: false }, selectedTag);
+      setTaskTitle("");
+      setSelectedTag({});
+      closeModal();
+    } else {
+      Alert.alert("Please add a new task.");
+    }
+  };
+
+  const getTags = async () => {
+    try {
+      const tags = await db.execute("SELECT * FROM tags");
+      setTagsList(tags.rows);
+    } catch (error) {
+      console.error("Error getting tags", error);
+    }
+  };
+
+  useEffect(() => {
+    getTags();
+  }, []);
+
+  return (
+    <Modal
+      style={styles.modalContainer}
+      visible={modalVisible}
+      onDismiss={closeModal}
+    >
+      <View>
+        <View style={styles.newTaskBox}>
+          <TextInput
+            mode="flat"
+            style={[
+              styles.textInput
+            ]}
+            contentStyle={styles.textInputContent}
+            underlineColor="transparent"
+            activeUnderlineColor="#6BA2EA"
+            value={taskTitle}
+            onChangeText={setTaskTitle}
+            label="Enter a new task"
+            keyboardType="default"
+          />
+        </View>
+        <DropdownMenu tagsList={tagsList} setSelectedTag={setSelectedTag} />
+        <Button
+          style={styles.addTaskButton}
+          textColor="black"
+          onPress={handleAddTask}
+        >
+          Add task
+        </Button>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    backgroundColor: "white",
+    padding: 10,
+  },
+  newTaskBox: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: "lightgray",
+    backgroundColor: "#f0f5fd",
+    marginBottom: 10,
+  },
+  textInput: {
+    width: "100%",
+    backgroundColor: "transparent",
+    height: 50,
+  },
+  textInputContent: {
+    backgroundColor: "transparennt",
+    borderWidth: 0,
+    paddingLeft: 10,
+  },
+  button: {
+    height: 50,
+    width: 50,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  closeButton: {
+    alignItems: "flex-start",
+    bottom: 180,
+    left: -10,
+    zIndex: 1,
+  },
+  addTaskButton: {
+    backgroundColor: "#b2cae9",
+    marginTop: 10,
+  },
+});

package/components/DropdownMenu.js

@@ -0,0 +1,67 @@
+import { View, StyleSheet } from "react-native";
+import RNPickerSelect from "react-native-picker-select";
+
+export default DropdownMenu = ({ tagsList, selectedTag, setSelectedTag }) => {
+  const TAGS = tagsList.map((tag) => {
+    return { label: tag.name, value: tag.name };
+  });
+
+  const getTagUuid = (value) => {
+    const tagUuid = tagsList.filter((tag) => {
+      return tag.name === value;
+    });
+    return tagUuid[0]?.uuid;
+  };
+
+  return (
+    <View style={styles.container}>
+      <RNPickerSelect
+        items={TAGS}
+        onValueChange={(value) =>
+          setSelectedTag({ uuid: getTagUuid(value), name: value })
+        }
+        placeholder={{ label: "Select a category", value: null }}
+        value={selectedTag}
+        style={pickerSelectStyles}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderColor: "lightgray",
+    borderWidth: 1,
+    borderRadius: 5,
+    backgroundColor: "#f0f5fd",
+    marginBottom: 10,
+  },
+});
+
+const pickerSelectStyles = StyleSheet.create({
+  inputIOSContainer: { pointerEvents: "none" },
+  inputIOS: {
+    height: 50,
+    fontSize: 16,
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    borderWidth: 1,
+    borderColor: "lightgray",
+    borderRadius: 4,
+    color: "black",
+    backgroundColor: "#f0f5fd",
+    paddingRight: 30,
+  },
+  inputAndroid: {
+    height: 50,
+    fontSize: 16,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderWidth: 1,
+    borderColor: "lightgray",
+    borderRadius: 4,
+    color: "black",
+    backgroundColor: "#f0f5fd",
+    paddingRight: 30,
+  },
+});

package/components/SyncContext.js

@@ -0,0 +1,119 @@
+import { createContext, useContext, useEffect, useState, useRef } from 'react';
+import { InteractionManager, AppState } from 'react-native';
+import { db } from '../db/dbConnection';
+
+const SyncContext = createContext();
+
+export const SyncProvider = ({ children }) => {
+  const refreshCallbacks = useRef(new Set());
+  const [isSyncEnabled, setIsSyncEnabled] = useState(false);
+  const isCheckingRef = useRef(false);
+  const lastCheckTimeRef = useRef(0);
+  const appStateRef = useRef(AppState.currentState);
+  const timeoutIdRef = useRef(null);
+
+  const registerRefreshCallback = (callback) => {
+    refreshCallbacks.current.add(callback);
+    return () => refreshCallbacks.current.delete(callback);
+  };
+
+  const triggerRefresh = () => {
+    refreshCallbacks.current.forEach(callback => callback());
+  };
+
+  const setSync = (enabled) => {
+    setIsSyncEnabled(enabled);
+  };
+
+  useEffect(() => {
+    if (!isSyncEnabled) return;
+
+    const checkForChanges = () => {
+      // Skip if already checking or app is in background
+      if (isCheckingRef.current || appStateRef.current !== 'active') {
+        timeoutIdRef.current = setTimeout(checkForChanges, 1000);
+        return;
+      }
+
+      // Throttle checks - don't check more than once every 2 seconds
+      const now = Date.now();
+      if (now - lastCheckTimeRef.current < 2000) {
+        timeoutIdRef.current = setTimeout(checkForChanges, 2000 - (now - lastCheckTimeRef.current));
+        return;
+      }
+
+      // Use InteractionManager to wait for UI interactions to complete
+      InteractionManager.runAfterInteractions(async () => {
+        if (isCheckingRef.current) return;
+        
+        isCheckingRef.current = true;
+        lastCheckTimeRef.current = Date.now();
+        
+        try {
+          // Use a timeout for the database query to prevent hanging
+          const queryPromise = db.execute('SELECT cloudsync_network_check_changes();');
+          const timeoutPromise = new Promise((_, reject) => 
+            setTimeout(() => reject(new Error('Query timeout')), 5000)
+          );
+          
+          const result = await Promise.race([queryPromise, timeoutPromise]);
+          
+          if (result.rows && result.rows.length > 0 && result.rows[0]['cloudsync_network_check_changes()'] > 0) {
+            console.log(`${result.rows[0]['cloudsync_network_check_changes()']} changes detected, triggering refresh`);
+            // Defer refresh to next tick to avoid blocking current interaction
+            setTimeout(() => triggerRefresh(), 0);
+          }
+        } catch (error) {
+          console.error('Error checking for changes:', error);
+        } finally {
+          isCheckingRef.current = false;
+          
+          // Schedule next check with adaptive interval
+          const nextInterval = appStateRef.current === 'active' ? 2500 : 10000;
+          timeoutIdRef.current = setTimeout(checkForChanges, nextInterval);
+        }
+      });
+    };
+
+    // Handle app state changes
+    const handleAppStateChange = (nextAppState) => {
+      appStateRef.current = nextAppState;
+      
+      // If app becomes active and sync is enabled, check immediately
+      if (nextAppState === 'active' && isSyncEnabled && !isCheckingRef.current) {
+        if (timeoutIdRef.current) {
+          clearTimeout(timeoutIdRef.current);
+        }
+        timeoutIdRef.current = setTimeout(checkForChanges, 100);
+      }
+    };
+
+    const subscription = AppState.addEventListener('change', handleAppStateChange);
+
+    // Start checking after a small delay to let UI settle
+    timeoutIdRef.current = setTimeout(checkForChanges, 1000);
+
+    return () => {
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current);
+        timeoutIdRef.current = null;
+      }
+      isCheckingRef.current = false;
+      subscription?.remove();
+    };
+  }, [isSyncEnabled]);
+
+  return (
+    <SyncContext.Provider value={{ registerRefreshCallback, setSync }}>
+      {children}
+    </SyncContext.Provider>
+  );
+};
+
+export const useSyncContext = () => {
+  const context = useContext(SyncContext);
+  if (!context) {
+    throw new Error('useSyncContext must be used within a SyncProvider');
+  }
+  return context;
+};

package/components/TaskRow.js

@@ -0,0 +1,103 @@
+import { useState, useRef, useEffect } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
+import { Swipeable } from "react-native-gesture-handler";
+
+export default TaskRow = ({ task, updateTask, handleDelete }) => {
+  const { uuid, title, isCompleted, tag_uuid, tag_name } = task;
+  const [checked, setChecked] = useState(isCompleted);
+  const swipableRef = useRef(null);
+
+  useEffect(() => {
+    setChecked(isCompleted);
+  }, [isCompleted]);
+
+  const handleIconPress = () => {
+    const newCompletedStatus = checked === 1 ? 0 : 1;
+    setChecked(newCompletedStatus);
+    updateTask(newCompletedStatus, uuid);
+  };
+
+  const renderLeftActions = () => {
+    return (
+      <TouchableOpacity
+        style={styles.deleteButton}
+        onPress={() => {
+          handleDelete(uuid);
+          if (swipableRef.current) {
+            swipableRef.current.close();
+          }
+        }}
+      >
+        <Text style={styles.deleteButtonText}>Delete</Text>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <Swipeable renderLeftActions={renderLeftActions} ref={swipableRef}>
+      <View style={styles.taskRow}>
+        <View style={styles.taskAndTag}>
+          {checked === 0 ? (
+            <Text style={styles.text}>{title}</Text>
+          ) : (
+            <Text style={styles.strikethroughText}>{title}</Text>
+          )}
+          <Text style={styles.tag}>{tag_name}</Text>
+        </View>
+        <TouchableOpacity onPress={handleIconPress}>
+          <Icon
+            name={checked === 1 ? "check-circle" : "circle-thin"}
+            size={20}
+            color={"#6BA2EA"}
+          />
+        </TouchableOpacity>
+      </View>
+      <View style={styles.dottedBox} />
+    </Swipeable>
+  );
+};
+
+const styles = StyleSheet.create({
+  taskRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    fontSize: 16,
+    padding: 10,
+  },
+  deleteButton: {
+    backgroundColor: "#6BA2EA",
+    padding: 10,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  dottedBox: {
+    borderWidth: 1,
+    borderColor: "lightgray",
+    borderStyle: "dashed",
+  },
+  deleteButtonText: {
+    color: "white",
+  },
+  text: {
+    fontSize: 16,
+  },
+  strikethroughText: {
+    textDecorationLine: "line-through",
+    textDecorationColor: "#6BA2EA",
+    fontSize: 16,
+  },
+  tag: {
+    color: "gray",
+    fontSize: 12,
+    marginTop: 5,
+  },
+  taskAndTag: {
+    flexDirection: "column",
+  },
+  actions: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});

package/db/dbConnection.js

@@ -0,0 +1,3 @@
+import { open } from "@op-engineering/op-sqlite";
+
+export const db = open({ name: 'to-do-app' });

package/hooks/useCategories.js

@@ -0,0 +1,94 @@
+import { useState, useEffect } from 'react'
+import { Platform } from 'react-native';
+import { db } from "../db/dbConnection";
+import { CONNECTION_STRING } from "@env";
+import { getDylibPath } from "@op-engineering/op-sqlite";
+import { randomUUID } from 'expo-crypto';
+import { useSyncContext } from '../components/SyncContext';
+
+const useCategories = () => {
+  const [moreCategories, setMoreCategories] = useState(['Work', 'Personal'])
+  const { registerRefreshCallback, setSync } = useSyncContext()
+
+  const getCategories = async () => {
+    try {
+      const tags = await db.execute('SELECT * FROM tags')
+      const allCategories = tags.rows.map(tag => tag.name)
+      setMoreCategories(allCategories)
+    } catch (error) {
+      console.error('Error getting tags/categories', error)
+    }
+  }
+
+  const addCategory = async newCategory => {
+    try {
+      await db.execute('INSERT INTO tags (uuid, name) VALUES (?, ?) RETURNING *', [randomUUID(), newCategory])
+      db.execute('SELECT cloudsync_network_send_changes();')
+      setMoreCategories(prevCategories => [...prevCategories, newCategory])
+    } catch (error) {
+      console.error('Error adding category', error)
+    }
+  }
+
+  const initializeTables = async () => {
+    let extensionPath;
+
+    console.log('Loading extension...');
+    try {
+      if (Platform.OS == "ios") {
+        extensionPath = getDylibPath("ai.sqlite.cloudsync", "CloudSync");
+      } else {
+        extensionPath = 'cloudsync';
+      }
+
+      db.loadExtension(extensionPath);
+
+      const version = await db.execute('SELECT cloudsync_version();');
+      console.log(`Cloudsync extension loaded successfully, version: ${version.rows[0]['cloudsync_version()']}`);
+    } catch (error) {
+      console.error('Error loading cloudsync extension:', error);
+    }
+
+    console.log('Initializing tables and cloudsync...');
+    try {
+      await db.execute('CREATE TABLE IF NOT EXISTS tasks (uuid TEXT NOT NULL PRIMARY KEY, title TEXT, isCompleted INT NOT NULL DEFAULT 0);')
+      await db.execute('CREATE TABLE IF NOT EXISTS tags (uuid TEXT NOT NULL PRIMARY KEY, name TEXT, UNIQUE(name));')
+      await db.execute('CREATE TABLE IF NOT EXISTS tasks_tags (uuid TEXT NOT NULL PRIMARY KEY, task_uuid TEXT, tag_uuid TEXT, FOREIGN KEY (task_uuid) REFERENCES tasks(uuid), FOREIGN KEY (tag_uuid) REFERENCES tags(uuid));')
+
+      await db.execute(`SELECT cloudsync_init('*');`);
+      await db.execute('INSERT OR IGNORE INTO tags (uuid, name) VALUES (?, ?)', [randomUUID(), 'Work'])
+      await db.execute('INSERT OR IGNORE INTO tags (uuid, name) VALUES (?, ?)', [randomUUID(), 'Personal'])
+
+      if (CONNECTION_STRING.startsWith('sqlitecloud://')) {
+        await db.execute(`SELECT cloudsync_network_init('${CONNECTION_STRING}');`);
+      } else {
+        console.warn(CONNECTION_STRING)
+        throw new Error('No valid CONNECTION_STRING provided, cloudsync_network_init will not be called');
+      }
+
+      db.execute('SELECT cloudsync_network_sync(100, 10);')
+      getCategories()
+      setSync(true)
+    } catch (error) {
+      console.error('Error creating tables', error)
+    }
+  }
+
+  useEffect(() => {
+    initializeTables()
+  }, [])
+
+  useEffect(() => {
+    return registerRefreshCallback(() => {
+      getCategories();
+    });
+  }, [registerRefreshCallback])
+
+  return {
+    moreCategories,
+    addCategory,
+    getCategories
+  }
+}
+
+export default useCategories