create-100x-mobile 0.3.2 → 0.4.0

package/dist/commands/new.js

@@ -93,7 +93,7 @@ async function cmdNew(args) {
     // We'll calculate totalSteps after Clerk prompts, but we create the
     // counter now. We'll adjust totalSteps after Clerk prompts.
     let currentStep = 0;
-    let totalSteps = 5; // base: structure, deps, convex, git, health check
+    let totalSteps = 6; // base: structure, deps, expo deps, convex, git, health check
     // totalSteps += 1 if clerkDomain (convex env step) — adjusted after Clerk prompts
     const stepLabel = () => `(${currentStep}/${totalSteps})`;
     // ── Step: Create directories ─────────────────────────
@@ -168,6 +168,40 @@ async function cmdNew(args) {
         }
     }
     prompts_1.log.success("Dependencies installed.");
+    // ── Step: Resolve Expo dependencies ────────────────────
+    currentStep++;
+    prompts_1.log.step(`Installing Expo dependencies ${stepLabel()}`);
+    const expoPackages = [
+        "expo-router",
+        "@expo/vector-icons",
+        "expo-auth-session",
+        "expo-blur",
+        "expo-constants",
+        "expo-font",
+        "expo-haptics",
+        "expo-linking",
+        "expo-secure-store",
+        "expo-splash-screen",
+        "expo-status-bar",
+        "expo-system-ui",
+        "expo-web-browser",
+        "react-native-gesture-handler",
+        "react-native-reanimated",
+        "react-native-safe-area-context",
+        "react-native-screens",
+        "react-native-svg",
+        "react-native-web",
+    ];
+    try {
+        await (0, run_1.run)("npx", ["expo", "install", ...expoPackages], {
+            cwd: projectDir,
+        });
+        prompts_1.log.success("Expo dependencies resolved.");
+    }
+    catch {
+        prompts_1.log.warn("Could not resolve Expo deps automatically.");
+        prompts_1.log.info(picocolors_1.default.dim("  Run manually: npx expo install --fix"));
+    }
     // ── Step 5: Prompt for Clerk keys ──────────────────────
     // Moved BEFORE Convex init so we only need a single `convex dev --once` run.
     prompts_1.log.info("");
@@ -225,7 +259,7 @@ async function cmdNew(args) {
     }
     // Adjust total steps if Clerk domain is configured
     if (clerkDomain) {
-        totalSteps = 6; // adds convex env step
+        totalSteps = 7; // adds convex env step
     }
     // ── Write Clerk env vars to .env.local ─────────
     const envLocalPath = (0, node_path_1.join)(projectDir, ".env.local");

package/dist/templates/components/addTodoForm.js

@@ -2,13 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addTodoFormTemplate = addTodoFormTemplate;
 function addTodoFormTemplate() {
-    return `import React, { useState } from "react";
-import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withSpring,
-} from "react-native-reanimated";
+    return `import React, { useState, useRef } from "react";
+import { View, TextInput, TouchableOpacity, StyleSheet, Animated } from "react-native";
 import * as Haptics from "expo-haptics";
 import { Plus } from "lucide-react-native";
 
@@ -18,17 +13,20 @@ interface AddTodoFormProps {
 
 export function AddTodoForm({ onAddTodo }: AddTodoFormProps) {
   const [text, setText] = useState("");
-  const buttonScale = useSharedValue(1);
-
-  const buttonAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: buttonScale.value }],
-  }));
+  const buttonScale = useRef(new Animated.Value(1)).current;
 
   const handleSubmit = () => {
     if (text.trim()) {
-      buttonScale.value = withSpring(0.9, { damping: 15 }, () => {
-        buttonScale.value = withSpring(1, { damping: 15 });
-      });
+      Animated.sequence([
+        Animated.spring(buttonScale, {
+          toValue: 0.9,
+          useNativeDriver: true,
+        }),
+        Animated.spring(buttonScale, {
+          toValue: 1,
+          useNativeDriver: true,
+        }),
+      ]).start();
       Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
       onAddTodo(text);
       setText("");
@@ -48,7 +46,7 @@ export function AddTodoForm({ onAddTodo }: AddTodoFormProps) {
           returnKeyType="done"
           multiline={false}
         />
-        <Animated.View style={buttonAnimatedStyle}>
+        <Animated.View style={{ transform: [{ scale: buttonScale }] }}>
           <TouchableOpacity
             style={[styles.addButton, !text.trim() && styles.addButtonDisabled]}
             onPress={handleSubmit}

package/dist/templates/components/todoItem.js

@@ -2,14 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.todoItemTemplate = todoItemTemplate;
 function todoItemTemplate() {
-    return `import React from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import Animated, {
-  FadeInDown,
-  useSharedValue,
-  useAnimatedStyle,
-  withSpring,
-} from "react-native-reanimated";
+    return `import React, { useRef } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Animated } from "react-native";
 import * as Haptics from "expo-haptics";
 import { Check, X } from "lucide-react-native";
 import type { Todo } from "@/app/(tabs)/index";
@@ -22,16 +16,28 @@ interface TodoItemProps {
 }
 
 export function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
-  const checkboxScale = useSharedValue(1);
+  const checkboxScale = useRef(new Animated.Value(1)).current;
+  const fadeAnim = useRef(new Animated.Value(0)).current;
 
-  const checkboxAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: checkboxScale.value }],
-  }));
+  React.useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  }, []);
 
   const handleToggle = () => {
-    checkboxScale.value = withSpring(0.85, { damping: 15 }, () => {
-      checkboxScale.value = withSpring(1, { damping: 15 });
-    });
+    Animated.sequence([
+      Animated.spring(checkboxScale, {
+        toValue: 0.85,
+        useNativeDriver: true,
+      }),
+      Animated.spring(checkboxScale, {
+        toValue: 1,
+        useNativeDriver: true,
+      }),
+    ]).start();
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
     onToggle(todo._id);
   };
@@ -42,7 +48,7 @@ export function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
   };
 
   return (
-    <Animated.View entering={FadeInDown.duration(300).springify()}>
+    <Animated.View style={{ opacity: fadeAnim }}>
       <View style={styles.container}>
         <TouchableOpacity
           style={styles.checkboxHitArea}
@@ -53,7 +59,7 @@ export function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
             style={[
               styles.checkbox,
               todo.completed && styles.checkboxCompleted,
-              checkboxAnimatedStyle,
+              { transform: [{ scale: checkboxScale }] },
             ]}
           >
             {todo.completed && (

package/dist/templates/config/packageJson.js

@@ -15,33 +15,11 @@ function packageJsonTemplate(appName) {
         },
         dependencies: {
             "@clerk/clerk-expo": "^2.14.24",
-            "@expo/vector-icons": "^15.0.3",
             "@react-navigation/bottom-tabs": "^7.3.10",
             "@react-navigation/native": "^7.1.6",
             convex: "^1.26.1",
-            expo: "~54.0.31",
-            "expo-auth-session": "~7.0.10",
-            "expo-blur": "~15.0.8",
-            "expo-constants": "~18.0.13",
-            "expo-font": "~14.0.10",
-            "expo-haptics": "~15.0.8",
-            "expo-linking": "~8.0.11",
-            "expo-router": "~6.0.21",
-            "expo-secure-store": "~15.0.8",
-            "expo-splash-screen": "~31.0.13",
-            "expo-status-bar": "~3.0.9",
-            "expo-system-ui": "~6.0.9",
-            "expo-web-browser": "~15.0.10",
+            expo: "latest",
             "lucide-react-native": "^0.542.0",
-            react: "19.1.0",
-            "react-dom": "19.1.0",
-            "react-native": "0.81.5",
-            "react-native-gesture-handler": "~2.28.0",
-            "react-native-reanimated": "~3.16.1",
-            "react-native-safe-area-context": "~5.6.0",
-            "react-native-screens": "~4.16.0",
-            "react-native-svg": "15.12.1",
-            "react-native-web": "^0.21.0",
         },
         devDependencies: {
             "@babel/core": "^7.25.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-100x-mobile",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Scaffold a full-stack mobile app with Expo + Convex + Clerk in seconds",
   "main": "dist/cli.js",
   "bin": {