From 936d1eb3f6f23c5d024cd83ef514997e7832431b Mon Sep 17 00:00:00 2001 From: Holat <105239299+Holat@users.noreply.github.com> Date: Wed, 23 Aug 2023 11:24:45 +0100 Subject: [PATCH] update --- app/index.tsx | 40 +++++++++++++++++++++++--------------- components/Head.tsx | 16 +++++++-------- components/ToDoCard.tsx | 20 +++++++++++++------ components/historyCard.tsx | 2 +- 4 files changed, 46 insertions(+), 32 deletions(-) diff --git a/app/index.tsx b/app/index.tsx index 1554957..4e23e8e 100644 --- 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(""); + const [username, setUser] = useState(""); const [taskItem, setTaskItem] = useState([]); const DarkMode = useColorScheme() === "dark"; @@ -39,6 +41,8 @@ const Home = () => { } }; + const rStyle = createCardAnimation(create); + return ( { : {}, ]} > - showCreate(true)} - style={[create ? styles.header1 : styles.header]} - > - {create ? ( - - ) : ( - Tap To Create - )} - - + + showCreate(true)} + style={[create ? styles.header1 : styles.header]} + > + {create ? ( + + ) : ( + + Tap To Create + + )} + + + diff --git a/components/Head.tsx b/components/Head.tsx index 16d14c9..b6bb4da 100644 --- 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 ( - + showCreate(false)}> { Create To-do - + ); }; diff --git a/components/ToDoCard.tsx b/components/ToDoCard.tsx index 4a5b14a..8a80348 100644 --- 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 ( + {/** + * failOffsetY={[-5, 5]} + * activeOffsetX={[-5, 5]} + * simultaneousHandlers={simultaneousHandlers} + * Props used to prevent the gesture of the card from interfering with flatlist scroll + */}