some cleanup

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/src/app/index.tsx

@@ -8,8 +8,10 @@ import * as Crypto from "expo-crypto"
 import { background, colorInvert, controlSize, padding as iosPadding, shapes } from "@expo/ui/swift-ui/modifiers";
 // No numeric width() on Android: @expo/ui 57 can't convert it natively and crashes.
 import { fillMaxWidth, padding, weight } from "@expo/ui/jetpack-compose/modifiers";
-// The Android emulator reaches the host via 10.0.2.2; the iOS simulator shares the host's network.
-const apiUrl = Platform.OS === "android" ? "http://10.0.2.2:8080" : "http://127.0.0.1:8080"
+// The iOS simulator shares the host's network; devenv runs `adb reverse` so Android devices do too.
+const router = createRouter("http://127.0.0.1:8080")
+// Changes made elsewhere (another device, the web app) show up within this interval.
+const syncIntervalMs = 2000
 
 // SwiftUI clips a border to its corner radius, cutting off the corners, so on iOS the
 // border is an outer rounded fill showing 1pt around an inner one.
@@ -38,38 +40,42 @@ function AnimatedRow({ children }: { children: React.ReactNode }) {
 }
 
 export default function Index() {
-  const router = createRouter(apiUrl)
   const [todos, setTodos] = useState<Array<Todo>>([])
+  const [offline, setOffline] = useState(false)
   const todoToCreateTask = useNativeState<string>("")
   const colorScheme = useColorScheme()
   const fetchTodos = () => {
     router.todos.listTodos({}).then((r) => {
-      setTodos(r.todos)
-    })
+      setOffline(false)
+      // Polling returns the same list most of the time; keep the old array to skip re-rendering.
+      setTodos((current) => JSON.stringify(current) === JSON.stringify(r.todos) ? current : r.todos)
+    }).catch(() => setOffline(true))
   }
   useEffect(() => {
-    fetchTodos();
+    fetchTodos()
+    const interval = setInterval(fetchTodos, syncIntervalMs)
+    return () => clearInterval(interval)
   }, [])
 
   const setTodoDone = (id: string, task: string) => {
     return (done: boolean) => {
-      router.todos.updateTodo({ todo: { id, task, done } }).then(fetchTodos)
+      router.todos.updateTodo({ todo: { id, task, done } }).then(fetchTodos, () => setOffline(true))
     }
   }
 
   const deleteTodo = (id: string) => {
     return () => {
-      router.todos.deleteTodo({ todo: { id } }).then(fetchTodos)
+      router.todos.deleteTodo({ todo: { id } }).then(fetchTodos, () => setOffline(true))
     }
   }
 
   const createTodo = () => {
-    router.todos.createTodo({ todo: { id: Crypto.randomUUID(), task: todoToCreateTask.value } }).then((r) => {
-      console.log(r)
+    const task = todoToCreateTask.value.trim()
+    if (!task) return
+    router.todos.createTodo({ todo: { id: Crypto.randomUUID(), task } }).then(() => {
+      todoToCreateTask.value = ""
       fetchTodos()
-    }).catch((e) => {
-      console.log(e)
-    })
+    }, () => setOffline(true))
   }
 
   const updateTodoToCreateTask = (task: string) => {
@@ -81,6 +87,7 @@ export default function Index() {
       <Host matchContents={{ vertical: true }}>
         <Column alignment="center" modifiers={[fillMaxWidth()]}>
           <Text textStyle={{fontSize:30}}> Create Todo </Text>
+          {offline && <Text textStyle={{ color: "#FF3B30" }}>Can't reach the API, retrying…</Text>}
           <TextInput
             value={todoToCreateTask}
             onChangeText={updateTodoToCreateTask}