create-100x-mobile 0.3.2 → 0.3.3

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/package.json

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