- Added todo completed animation when child completes a todo

components/pages/todos/ToDoItem.tsx

@@ -19,6 +19,7 @@ import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 import RepeatIcon from "@/assets/svgs/RepeatIcon";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import { format } from "date-fns";
+import { Image } from "react-native";
 
 const ToDoItem = (props: {
   item: IToDo;
@@ -29,7 +30,9 @@ const ToDoItem = (props: {
   const { data: members } = useGetFamilyMembers();
   const { profileData } = useAuthContext();
   const isParent = profileData?.userType === ProfileType.PARENT;
+  const isChild = profileData?.userType === ProfileType.CHILD;
 
+  const [showAnimation, setShowAnimation] = useState(false);
   const [visible, setVisible] = useState<boolean>(false);
   const [points, setPoints] = useState(props.item.points);
   const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
@@ -66,6 +69,15 @@ const ToDoItem = (props: {
     isTodoEditable = props.item.creatorId === profileData?.uid;
   }
 
+  const handleTodoClickAnimation = () => {
+    setShowAnimation(true);
+
+    // Optionally hide animation after 2 seconds
+    setTimeout(() => {
+      setShowAnimation(false);
+    }, 2000);
+  };
+
   return (
     <View
       key={props.item.id}
@@ -78,6 +90,17 @@ const ToDoItem = (props: {
         backgroundColor: "white",
       }}
     >
+      {showAnimation && (
+          <View style={styles.animationContainer}>
+              <View style={styles.animationOverlay}>
+                <Image
+                    source={require("@/assets/animations/todoCompletedAnimation.gif")}
+                    style={styles.animation}
+                    resizeMode="contain"
+                />
+              </View>
+          </View>
+      )}
       {visible && (
         <AddChoreDialog
           isVisible={visible}
@@ -107,8 +130,11 @@ const ToDoItem = (props: {
           size={26.64}
           borderRadius={50}
           color="#fd1575"
-          onValueChange={(value) => {
+          onValueChange={() => {
             updateToDo({ id: props.item.id, done: !props.item.done });
+            if (!props.item.done && isChild) {
+              handleTodoClickAnimation();
+            }
           }}
         />
       </View>
@@ -303,4 +329,26 @@ const styles = StyleSheet.create({
   checked: {
     borderRadius: 50,
   },
+  animation: {
+    width: 100,
+    height: 100,
+    marginTop: 10,
+  },
+  animationContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#FFF",
+  },
+  animationOverlay: {
+    position: "absolute", // Overlay on top of everything
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)", // Semi-transparent background
+    zIndex: 10,
+  },
 });