update

Holat · Aug 23, 2023 · 936d1eb · 936d1eb
1 parent 8714884
commit 936d1eb
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 32 deletions.
diff --git a/app/index.tsx b/app/index.tsx
@@ -10,6 +10,7 @@ import React, { useState, useEffect } from "react";
 import { FontAwesome5 } from "@expo/vector-icons";
 import { useRouter } from "expo-router";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import Animated, { FadeInDown } from "react-native-reanimated";
 
 import Header from "../components/Header";
 import CreateScrn from "../components/CreateScrn";
@@ -18,11 +19,12 @@ import FONT from "../constants/FONT";
 import { listProp } from "../types/type";
 import { light, dark } from "../constants/Colors";
 import Head from "../components/Head";
+import createCardAnimation from "../components/Animation/createCardAnimation";
 
 const Home = () => {
   const router = useRouter();
   const [create, showCreate] = useState(false);
-  const [username, setUser] = useState<string>("");
+  const [username, setUser] = useState("");
   const [taskItem, setTaskItem] = useState<listProp[]>([]);
   const DarkMode = useColorScheme() === "dark";
 
@@ -39,6 +41,8 @@ const Home = () => {
     }
   };
 
+  const rStyle = createCardAnimation(create);
+
   return (
     <View
       style={[styles.cont, DarkMode && { backgroundColor: dark.background2 }]}
@@ -59,21 +63,25 @@ const Home = () => {
             : {},
         ]}
       >
-        <Pressable
-          onPress={() => showCreate(true)}
-          style={[create ? styles.header1 : styles.header]}
-        >
-          {create ? (
-            <Head showCreate={showCreate} />
-          ) : (
-            <Text style={styles.headerTxt}>Tap To Create</Text>
-          )}
-        </Pressable>
-        <CreateScrn
-          create={create}
-          showCreate={showCreate}
-          setTaskItem={setTaskItem}
-        />
+        <Animated.View style={[rStyle]}>
+          <Pressable
+            onPress={() => showCreate(true)}
+            style={[create ? styles.header1 : styles.header]}
+          >
+            {create ? (
+              <Head showCreate={showCreate} />
+            ) : (
+              <Animated.Text entering={FadeInDown} style={styles.headerTxt}>
+                Tap To Create
+              </Animated.Text>
+            )}
+          </Pressable>
+          <CreateScrn
+            create={create}
+            showCreate={showCreate}
+            setTaskItem={setTaskItem}
+          />
+        </Animated.View>
         <List create={create} taskItem={taskItem} setTaskItem={setTaskItem} />
       </View>
     </View>

diff --git a/components/Head.tsx b/components/Head.tsx
@@ -1,12 +1,7 @@
-import {
-  View,
-  Text,
-  StyleSheet,
-  Pressable,
-  useColorScheme,
-} from "react-native";
+import { Text, StyleSheet, Pressable, useColorScheme } from "react-native";
 import React from "react";
 import { Ionicons } from "@expo/vector-icons";
+import Animated, { FadeInUp } from "react-native-reanimated";
 
 import { light, dark } from "../constants/Colors";
 import { showCreateProp } from "../types/type";
@@ -15,7 +10,10 @@ import FONT from "../constants/FONT";
 const Head = ({ showCreate }: showCreateProp) => {
   const DarkMode = useColorScheme() === "dark";
   return (
-    <View style={{ flexDirection: "row", alignItems: "center", gap: 5 }}>
+    <Animated.View
+      entering={FadeInUp}
+      style={{ flexDirection: "row", alignItems: "center", gap: 5 }}
+    >
       <Pressable onPress={() => showCreate(false)}>
         <Ionicons
           name="arrow-back-circle-outline"
@@ -26,7 +24,7 @@ const Head = ({ showCreate }: showCreateProp) => {
       <Text style={[styles.header1Txt, DarkMode && { color: dark.text }]}>
         Create To-do
       </Text>
-    </View>
+    </Animated.View>
   );
 };
 

diff --git a/components/ToDoCard.tsx b/components/ToDoCard.tsx
@@ -1,12 +1,12 @@
 import { Pressable, StyleSheet, Text, View } from "react-native";
 import React from "react";
-import { FontAwesome5, Ionicons, FontAwesome } from "@expo/vector-icons";
+import { Ionicons, FontAwesome } from "@expo/vector-icons";
 
 import { todoCardProp } from "../types/type";
 import FONT from "../constants/FONT";
 import { dark, light } from "../constants/Colors";
 import { historyDelete, setHistory } from "../constants/FUNT";
-import Animated, { FadeInLeft, FadeOutRight } from "react-native-reanimated";
+import Animated, { FadeInLeft, FadeOutLeft } from "react-native-reanimated";
 import { PanGestureHandler } from "react-native-gesture-handler";
 import useCardAnimation from "./Animation/useCardAnimation";
 
@@ -31,16 +31,24 @@ const ToDoCard = ({
 
   return (
     <Animated.View
-      style={[styles.main, rStyles.rCardStyle]}
+      exiting={FadeOutLeft}
       entering={FadeInLeft}
-      exiting={FadeOutRight}
+      style={[styles.main, rStyles.rCardStyle]}
     >
       <Animated.View style={[styles.abDelete, rStyles.rIconStyle]}>
         <Ionicons name="ios-trash-outline" size={24} color="#ffffff" />
       </Animated.View>
+      {/**
+       * failOffsetY={[-5, 5]}
+       * activeOffsetX={[-5, 5]}
+       * simultaneousHandlers={simultaneousHandlers}
+       * Props used to prevent the gesture of the card from interfering with flatlist scroll
+       */}
       <PanGestureHandler
-        onGestureEvent={operations.panGestureEvent}
+        failOffsetY={[-5, 5]}
+        activeOffsetX={[-5, 5]}
         simultaneousHandlers={simultaneousHandlers}
+        onGestureEvent={operations.panGestureEvent}
       >
         <Animated.View
           style={[
@@ -116,7 +124,7 @@ const styles = StyleSheet.create({
   },
   txt2: {
     fontSize: 12,
-    color: "#6E6E6E",
+    color: "#CCCCCC",
     marginRight: 5,
     fontFamily: FONT.JRegular,
   },

diff --git a/components/historyCard.tsx b/components/historyCard.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet, View, Pressable, Text } from "react-native";
+import { StyleSheet, View, Text } from "react-native";
 import { dark } from "../constants/Colors";
 import React from "react";
 import { FontAwesome5 } from "@expo/vector-icons";