@sqliteai/todoapp 1.0.2 → 1.0.4

package/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm ls:*)"
+    ]
+  }
+}

package/.env.example

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

package/README.md

@@ -2,6 +2,8 @@
 
 A simple Expo example demonstrating SQLite synchronization with CloudSync. Build cross-platform apps that sync data seamlessly across devices.
 
+<img src="https://github.com/user-attachments/assets/86db5c25-d8ff-4c31-b157-8dff178e1720" width="40%" height="40%">
+
 ## 🚀 Quick Start
 
 ### 1. Clone the template

package/app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "todoapp",
     "slug": "todoapp",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",

package/components/TaskRow.js

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import Icon from "react-native-vector-icons/FontAwesome";
+import Icon from "@react-native-vector-icons/fontawesome";
 import { Swipeable } from "react-native-gesture-handler";
 
 export default TaskRow = ({ task, updateTask, handleDelete }) => {

package/hooks/useCategories.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Platform } from 'react-native';
 import { db } from "../db/dbConnection";
-import { CONNECTION_STRING } from "@env";
+import { ANDROID_CONNECTION_STRING, CONNECTION_STRING, API_TOKEN } from "@env";
 import { getDylibPath } from "@op-engineering/op-sqlite";
 import { randomUUID } from 'expo-crypto';
 import { useSyncContext } from '../components/SyncContext';
@@ -30,6 +30,16 @@ const useCategories = () => {
     }
   }
 
+  const removeCategory = async categoryName => {
+    try {
+      await db.execute('DELETE FROM tags WHERE name = ?', [categoryName])
+      db.execute('SELECT cloudsync_network_send_changes();')
+      setMoreCategories(prevCategories => prevCategories.filter(cat => cat !== categoryName))
+    } catch (error) {
+      console.error('Error removing category', error)
+    }
+  }
+
   const initializeTables = async () => {
     let extensionPath;
 
@@ -55,14 +65,18 @@ const useCategories = () => {
       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(`SELECT cloudsync_init('tasks');`);
+      await db.execute(`SELECT cloudsync_init('tags');`);
+      await db.execute(`SELECT cloudsync_init('tasks_tags');`);
+      
       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 && CONNECTION_STRING.startsWith('sqlitecloud://')) {
-        await db.execute(`SELECT cloudsync_network_init('${CONNECTION_STRING}');`);
+      if ((ANDROID_CONNECTION_STRING || CONNECTION_STRING) && API_TOKEN) {
+        await db.execute(`SELECT cloudsync_network_init('${Platform.OS == 'android' && ANDROID_CONNECTION_STRING ? ANDROID_CONNECTION_STRING : CONNECTION_STRING}');`);
+        await db.execute(`SELECT cloudsync_network_set_token('${API_TOKEN}');`)
       } else {
-        throw new Error('No valid CONNECTION_STRING provided, cloudsync_network_init will not be called');
+        throw new Error('No valid CONNECTION_STRING or API_TOKEN provided, cloudsync_network_init will not be called');
       }
 
       db.execute('SELECT cloudsync_network_sync(100, 10);')
@@ -86,6 +100,7 @@ const useCategories = () => {
   return {
     moreCategories,
     addCategory,
+    removeCategory,
     getCategories
   }
 }

package/package.json

@@ -1,13 +1,22 @@
 {
   "name": "@sqliteai/todoapp",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "An Expo template for building apps with the SQLite CloudSync extension",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sqliteai/sqlite-sync.git"
   },
   "author": "SQLiteAI",
-  "keywords": ["expo-template", "sqlite", "cloudsync", "todo", "sync", "react-native", "expo", "template"],
+  "keywords": [
+    "expo-template",
+    "sqlite",
+    "cloudsync",
+    "todo",
+    "sync",
+    "react-native",
+    "expo",
+    "template"
+  ],
   "main": "expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -21,19 +30,23 @@
   "dependencies": {
     "@op-engineering/op-sqlite": "14.1.4",
     "@react-native-picker/picker": "2.11.1",
+    "@react-native-vector-icons/fontawesome": "^12.4.0",
+    "@react-native-vector-icons/material-design-icons": "^12.4.0",
     "@react-navigation/native": "^7.1.17",
     "@react-navigation/stack": "^7.4.7",
     "expo": "^53.0.22",
+    "expo-asset": "^12.0.12",
+    "expo-constants": "^18.0.13",
     "expo-crypto": "~14.1.5",
     "expo-status-bar": "~2.2.3",
+    "prop-types": "^15.8.1",
     "react": "19.0.0",
-    "react-native": "0.79.5",
+    "react-native": "0.79.6",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-paper": "5.14.5",
     "react-native-picker-select": "^9.3.1",
     "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "~4.11.1",
-    "react-native-vector-icons": "^10.3.0"
+    "react-native-screens": "~4.11.1"
   },
   "devDependencies": {
     "@babel/core": "7.28.3",

package/plugins/CloudSyncSetup.js

@@ -1,4 +1,4 @@
-const { withDangerousMod, withXcodeProject } = require('@expo/config-plugins');
+const { withDangerousMod, withXcodeProject, withInfoPlist } = require('@expo/config-plugins');
 const fs = require('fs');
 const path = require('path');
 const https = require('https');
@@ -50,7 +50,7 @@ async function getLatestReleaseUrl(asset_pattern) {
   return new Promise((resolve, reject) => {
     const options = {
       hostname: 'api.github.com',
-      path: '/repos/sqliteai/sqlite-sync/releases/latest',
+      path: '/repos/sqliteai/sqlite-sync-dev/releases/latest',
       headers: {
         'User-Agent': 'expo-cloudsync-plugin'
       }
@@ -277,8 +277,18 @@ const withCloudSync = (config) => {
   
   // iOS setup - add to Xcode project
   config = withCloudSyncFramework(config);
-  
+
+  // iOS setup - register icon fonts in Info.plist
+  config = withInfoPlist(config, (config) => {
+    const fonts = config.modResults.UIAppFonts || [];
+    if (!fonts.includes('FontAwesome.ttf')) {
+      fonts.push('FontAwesome.ttf');
+    }
+    config.modResults.UIAppFonts = fonts;
+    return config;
+  });
+
   return config;
 };
 
-module.exports = withCloudSync;
+module.exports = withCloudSync;

package/screens/Categories.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
+import { ScrollView, StyleSheet, View, Alert } from "react-native";
 import { Avatar, Card, Text, Modal, Portal, Button, TextInput } from "react-native-paper";
+import Icon from '@react-native-vector-icons/material-design-icons';
 import { useFocusEffect } from '@react-navigation/native';
 import useCategories from "../hooks/useCategories";
 import { useSyncContext } from "../components/SyncContext";
@@ -22,7 +23,7 @@ const Categories = ({ navigation }) => {
     day: "numeric",
   });
 
-  const { moreCategories, addCategory } = useCategories();
+  const { moreCategories, addCategory, removeCategory } = useCategories();
   const { setSync } = useSyncContext();
 
   const [newCategory, setNewCategory] = useState("");
@@ -45,6 +46,24 @@ const Categories = ({ navigation }) => {
     hideModal();
   }
 
+  function handleRemoveCategory(categoryName) {
+    Alert.alert(
+      "Delete Category",
+      `Are you sure you want to delete "${categoryName}"?`,
+      [
+        {
+          text: "Cancel",
+          style: "cancel"
+        },
+        {
+          text: "Delete",
+          style: "destructive",
+          onPress: () => removeCategory(categoryName)
+        }
+      ]
+    );
+  }
+
   return (
     <>
       <Portal>
@@ -108,7 +127,7 @@ const Categories = ({ navigation }) => {
           >
             <Card.Title
               left={(props) => (
-                <Avatar.Icon
+                <Icon
                   {...props}
                   icon="inbox-outline"
                   color={styles.icon.color}
@@ -127,11 +146,12 @@ const Categories = ({ navigation }) => {
               key={index}
               style={styles.card}
               onPress={() => navigation.navigate("Tasks", { category })}
+              onLongPress={() => handleRemoveCategory(category)}
               mode="contained"
             >
               <Card.Title
                 left={(props) => (
-                  <Avatar.Icon
+                  <Icon
                     {...props}
                     icon="tag-outline"
                     color={styles.icon.color}
@@ -149,7 +169,7 @@ const Categories = ({ navigation }) => {
           <Card style={styles.addCard} onPress={showModal} mode="contained">
             <Card.Title
               left={(props) => (
-                <Avatar.Icon
+                <Icon
                   {...props}
                   icon="plus-circle-outline"
                   color={styles.addIcon.color}

package/screens/Home.js

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { View, Text, StyleSheet, FlatList, Alert } from "react-native";
 import { Button } from "react-native-paper";
-import Icon from "react-native-vector-icons/FontAwesome";
+import Icon from "@react-native-vector-icons/fontawesome";
 import TaskRow from "../components/TaskRow";
 import AddTaskModal from "../components/AddTaskModal";
 import useTasks from "../hooks/useTasks"