diff --git a/assets/animations/todoCompletedAnimation.gif b/assets/animations/todoCompletedAnimation.gif new file mode 100644 index 0000000..02e5223 Binary files /dev/null and b/assets/animations/todoCompletedAnimation.gif differ diff --git a/components/pages/todos/ToDoItem.tsx b/components/pages/todos/ToDoItem.tsx index 5cef00e..9498ac2 100644 --- a/components/pages/todos/ToDoItem.tsx +++ b/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(false); const [points, setPoints] = useState(props.item.points); const [pointsModalVisible, setPointsModalVisible] = useState(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 ( + {showAnimation && ( + + + + + + )} {visible && ( { + onValueChange={() => { updateToDo({ id: props.item.id, done: !props.item.done }); + if (!props.item.done && isChild) { + handleTodoClickAnimation(); + } }} /> @@ -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, + }, });