List update animation

Holat · Aug 22, 2023 · f546c1c · f546c1c
1 parent 8faae5e
commit f546c1c
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 87 deletions.
diff --git a/app/index.tsx b/app/index.tsx
@@ -82,7 +82,7 @@ const Home = () => {
 
 const styles = StyleSheet.create({
   cont: {
-    backgroundColor: "#1384F8",
+    backgroundColor: "#5F57FF",
     flex: 1,
     paddingTop: StatusBar.currentHeight,
   },

diff --git a/components/CreateScrn.tsx b/components/CreateScrn.tsx
@@ -60,7 +60,7 @@ const CreateScrn = ({ create, showCreate, setTaskItem }: createScreenProp) => {
         style={{ paddingHorizontal: 20, marginBottom: 20 }}
       >
         <TextInput
-          placeholder="Write task name"
+          placeholder="Write task title"
           style={[
             styles.input,
             { color: "white", fontSize: 18, fontFamily: FONT.JSemibold },

diff --git a/components/List.tsx b/components/List.tsx
@@ -1,7 +1,15 @@
-import { View, StyleSheet, FlatList, useColorScheme, Text } from "react-native";
-import React, { useEffect } from "react";
+import { View, StyleSheet, useColorScheme, Text } from "react-native";
+import React, { useEffect, useRef } from "react";
 import { light, dark } from "../constants/Colors";
 import { FontAwesome5 } from "@expo/vector-icons";
+import Animated, {
+  FadeInDown,
+  FadeInUp,
+  Transition,
+  EntryExitTransition,
+  CurvedTransition,
+} from "react-native-reanimated";
+import { FlatList } from "react-native-gesture-handler";
 
 import ToDoCard from "./ToDoCard";
 import { ListProp, DataProp } from "../types/type";
@@ -10,6 +18,7 @@ import { fetchTaskItems } from "../constants/FUNT";
 
 const List = ({ create, taskItem, setTaskItem }: ListProp) => {
   const DarkMode = useColorScheme() === "dark";
+  const flatListRef = useRef(null);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -25,7 +34,12 @@ const List = ({ create, taskItem, setTaskItem }: ListProp) => {
 
   const renderItem = ({ item }: DataProp) => {
     return (
-      <ToDoCard item={item} setTaskItem={setTaskItem} DarkMode={DarkMode} />
+      <ToDoCard
+        item={item}
+        setTaskItem={setTaskItem}
+        DarkMode={DarkMode}
+        simultaneousHandlers={flatListRef}
+      />
     );
   };
 
@@ -45,7 +59,8 @@ const List = ({ create, taskItem, setTaskItem }: ListProp) => {
   };
 
   return (
-    <View
+    <Animated.View
+      layout={CurvedTransition}
       style={[
         styles.list,
         !create && DarkMode
@@ -59,16 +74,21 @@ const List = ({ create, taskItem, setTaskItem }: ListProp) => {
     >
       {taskItem.length > 0 ? (
         <FlatList
+          ref={flatListRef}
           data={taskItem}
           keyExtractor={(item) => item.key}
           renderItem={renderItem}
           showsVerticalScrollIndicator={false}
           scrollEnabled={true}
+          contentContainerStyle={{
+            borderRadius: 20,
+            paddingHorizontal: 20,
+          }}
         />
       ) : (
         <Empty />
       )}
-    </View>
+    </Animated.View>
   );
 };
 
@@ -79,11 +99,11 @@ const styles = StyleSheet.create({
     backgroundColor: "white",
     borderTopLeftRadius: 40,
     borderTopRightRadius: 40,
-    paddingHorizontal: 20,
-    paddingTop: 30,
     paddingBottom: 5,
     flex: 1,
     flexGrow: 1,
+    overflow: "hidden",
+    paddingTop: 30,
   },
   scroll: {
     borderTopLeftRadius: 40,

diff --git a/components/ToDoCard.tsx b/components/ToDoCard.tsx
@@ -1,113 +1,106 @@
-import {
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-  useColorScheme,
-} from "react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
 import React from "react";
 import { FontAwesome5, Ionicons, FontAwesome } from "@expo/vector-icons";
-import AsyncStorage from "@react-native-async-storage/async-storage";
 
-import { listProp, todoCardProp } from "../types/type";
+import { todoCardProp } from "../types/type";
 import FONT from "../constants/FONT";
-import { light, dark } from "../constants/Colors";
-import { getTaskItem } from "../constants/FUNT";
+import { dark, light } from "../constants/Colors";
+import { historyDelete, setHistory } from "../constants/FUNT";
+import Animated, { FadeInLeft, FadeOutRight } from "react-native-reanimated";
+import { PanGestureHandler } from "react-native-gesture-handler";
+import useCardAnimation from "./Animation/useCardAnimation";
 
-const ToDoCard = ({ item, setTaskItem, DarkMode }: todoCardProp) => {
+const ToDoCard = ({
+  item,
+  setTaskItem,
+  DarkMode,
+  simultaneousHandlers,
+}: todoCardProp) => {
   // deletes the task which does not add the task to the history storage
   const handleDelete = async () => {
-    try {
-      const existingData = await AsyncStorage.getItem("itemData");
-      let DataArray = existingData ? JSON.parse(existingData) : [];
-
-      const updatedData = DataArray.filter(
-        (item1: listProp) => item1.key !== item.key
-      );
-      setTaskItem(updatedData);
-      await AsyncStorage.setItem("itemData", JSON.stringify(updatedData));
-    } catch (error) {
-      console.log(error);
-    }
+    const updatedData = await historyDelete(item);
+    setTaskItem(updatedData);
   };
+  const { rStyles, operations } = useCardAnimation(handleDelete);
 
   // adds the completed tasks to the history storage
-  const setHistory = async () => {
-    try {
-      const historyData = await AsyncStorage.getItem("history");
-      const itemData = await AsyncStorage.getItem("itemData");
-
-      let historyArray = historyData ? JSON.parse(historyData) : [];
-      let itemArray = itemData ? JSON.parse(itemData) : [];
-
-      const completedItem = itemArray.find(
-        (item1: listProp) => item1.key === item.key
-      );
-
-      if (completedItem) {
-        itemArray = itemArray.filter(
-          (item1: listProp) => item1.key !== item.key
-        );
-        historyArray.push(completedItem);
-
-        await AsyncStorage.setItem("itemData", JSON.stringify(itemArray));
-        await AsyncStorage.setItem("history", JSON.stringify(historyArray));
-
-        setTaskItem(itemArray);
-      }
-    } catch (error) {}
+  const handleSetHistory = async () => {
+    const historyItems = await setHistory(item);
+    setTaskItem(historyItems);
   };
 
   return (
-    <View style={[styles.cont, DarkMode && { backgroundColor: "#001f3f40" }]}>
-      <View style={styles.cont1}>
-        <View
+    <Animated.View
+      style={[styles.main, rStyles.rCardStyle]}
+      entering={FadeInLeft}
+      exiting={FadeOutRight}
+    >
+      <Animated.View style={[styles.abDelete, rStyles.rIconStyle]}>
+        <Ionicons name="ios-trash-outline" size={24} color="#ffffff" />
+      </Animated.View>
+      <PanGestureHandler
+        onGestureEvent={operations.panGestureEvent}
+        simultaneousHandlers={simultaneousHandlers}
+      >
+        <Animated.View
           style={[
-            styles.icon,
+            styles.cont,
             DarkMode && { backgroundColor: dark.background2 },
+            rStyles.rStyle,
           ]}
         >
-          <FontAwesome5 name="clipboard-list" size={24} color="white" />
-        </View>
-        <View>
-          <Text style={[styles.txt1, DarkMode && { color: dark.text }]}>
-            {item.name}
-          </Text>
-          <View style={{ flexDirection: "row" }}>
-            <Text style={styles.txt2}>{item.date}</Text>
-            <Text style={styles.txt2}>{item.time}</Text>
+          <View style={styles.cont1}>
+            <View style={[styles.icon, { backgroundColor: "white" }]}>
+              <Ionicons
+                name="ios-checkmark-done-sharp"
+                size={24}
+                color={DarkMode ? dark.background2 : light.background2}
+              />
+            </View>
+            <View>
+              <Text style={[styles.txt1, DarkMode && { color: dark.text }]}>
+                {item.name}
+              </Text>
+              <View style={{ flexDirection: "row" }}>
+                <Text style={styles.txt2}>{item.date}</Text>
+                <Text style={styles.txt2}>{item.time}</Text>
+              </View>
+            </View>
           </View>
-        </View>
-      </View>
-      <View style={styles.cont1}>
-        <Pressable onPress={handleDelete}>
-          <Ionicons name="ios-trash-outline" size={24} color="#ED187A" />
-        </Pressable>
-        <Pressable onPress={setHistory}>
-          <FontAwesome name="check" size={24} color="#1CB674" />
-        </Pressable>
-      </View>
-    </View>
+          <View style={styles.cont1}>
+            <Pressable onPress={handleSetHistory}>
+              <FontAwesome name="check" size={24} color="#1CB674" />
+            </Pressable>
+          </View>
+        </Animated.View>
+      </PanGestureHandler>
+    </Animated.View>
   );
 };
 
 export default ToDoCard;
 
 const styles = StyleSheet.create({
+  main: {
+    borderRadius: 20,
+    overflow: "hidden",
+    marginBottom: 5,
+    position: "relative",
+  },
   cont: {
     flexDirection: "row",
     justifyContent: "space-between",
-    padding: 20,
-    borderRadius: 20,
+    paddingHorizontal: 20,
     alignItems: "center",
-    marginBottom: 5,
-    backgroundColor: "#1384F820",
+    backgroundColor: "#5F57FF",
+    borderRadius: 20,
+    flex: 1,
   },
   icon: {
     backgroundColor: "#1384F8",
     width: 50,
     height: 50,
-    borderRadius: 6,
+    borderRadius: 50,
     alignItems: "center",
     justifyContent: "center",
   },
@@ -127,4 +120,14 @@ const styles = StyleSheet.create({
     marginRight: 5,
     fontFamily: FONT.JRegular,
   },
+  abDelete: {
+    backgroundColor: "#ED187A",
+    position: "absolute",
+    right: 0,
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "flex-end",
+    paddingRight: 20,
+    height: "100%",
+  },
 });
diff --git a/constants/Colors.ts b/constants/Colors.ts
@@ -6,7 +6,7 @@ const light = {
   text2: "#000",
   text3: "#6E6E6E",
   background1: "#fff",
-  background2: "#1384F8",
+  background2: "#5F57FF",
   background3: "#E7E7E7",
   background3A: "#6E6E6E",