create-100x-mobile 0.3.1 → 0.3.3

package/dist/templates/app/todosScreen.js

@@ -12,7 +12,6 @@ import {
   StyleSheet,
   StatusBar,
 } from "react-native";
-import Animated, { LinearTransition } from "react-native-reanimated";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { AddTodoForm } from "@/components/AddTodoForm";
 import { TodoItem } from "@/components/TodoItem";
@@ -32,8 +31,6 @@ export interface Todo {
 
 type FilterType = "all" | "active" | "completed";
 
-const AnimatedFlatList = Animated.createAnimatedComponent(FlatList<Todo>);
-
 export default function TodosScreen() {
   const [filter, setFilter] = useState<FilterType>("all");
 
@@ -119,14 +116,13 @@ export default function TodosScreen() {
           }}
         />
 
-        <AnimatedFlatList
+        <FlatList
           data={filteredTodos}
           renderItem={renderItem}
           keyExtractor={keyExtractor}
           style={styles.todosContainer}
           contentContainerStyle={styles.todosContent}
           showsVerticalScrollIndicator={false}
-          itemLayoutAnimation={LinearTransition.springify()}
           ListEmptyComponent={<EmptyState filter={filter} />}
           keyboardShouldPersistTaps="handled"
         />

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

@@ -37,7 +37,7 @@ function packageJsonTemplate(appName) {
             "react-dom": "19.1.0",
             "react-native": "0.81.5",
             "react-native-gesture-handler": "~2.28.0",
-            "react-native-reanimated": "~4.1.1",
+            "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",

package/package.json

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