Initialize Expo to-do-app with SQLite CloudSync integration

Author: Gioee

examples/to-do-app/.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>"

examples/to-do-app/.gitignore

@@ -0,0 +1,38 @@
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+.env
+
+/android
+/ios

examples/to-do-app/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>
+  );
+}

examples/to-do-app/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
+

examples/to-do-app/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"
+  }
+}

examples/to-do-app/assets/adaptive-icon.png

@@ -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",
+        },
+      ],
+    ],
+  };
+};

examples/to-do-app/assets/icon.png

@@ -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,
+  },
+});