create scrn and list animation

Holat · Aug 23, 2023 · 8714884 · 8714884
1 parent 9de560e
commit 8714884
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 22 deletions.
diff --git a/components/CreateScrn.tsx b/components/CreateScrn.tsx
@@ -1,5 +1,4 @@
 import {
-  View,
   StyleSheet,
   Platform,
   Pressable,
@@ -57,7 +56,7 @@ const CreateScrn = ({ create, showCreate, setTaskItem }: createScreenProp) => {
     return (
       <KeyboardAvoidingView
         behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ paddingHorizontal: 20, marginBottom: 20 }}
+        style={{ paddingHorizontal: 20, marginBottom: 20, flex: 1 }}
       >
         <TextInput
           placeholder="Write task title"
@@ -71,22 +70,20 @@ const CreateScrn = ({ create, showCreate, setTaskItem }: createScreenProp) => {
         />
         <TextInput
           placeholder="Add Subject"
+          multiline={true}
+          numberOfLines={5}
           style={[
             styles.input,
             {
               backgroundColor: DarkMode ? dark.background3 : light.background1,
               color: DarkMode ? dark.text : light.text2,
+              textAlignVertical: "top",
+              flex: 1,
             },
           ]}
           onChangeText={(text) => setSubject(text)}
           placeholderTextColor={DarkMode ? dark.text3 : light.text3}
         />
-        <View
-          style={{
-            height: 200,
-            backgroundColor: DarkMode ? dark.background1 : light.background1,
-          }}
-        ></View>
         <Pressable
           style={[
             styles.create,
@@ -112,7 +109,7 @@ const styles = StyleSheet.create({
     fontFamily: FONT.JRegular,
     paddingVertical: 15,
     paddingHorizontal: 20,
-    backgroundColor: "#1384F8",
+    backgroundColor: light.background2,
     borderRadius: 10,
     marginBottom: 15,
     shadowColor: "#000",
@@ -126,15 +123,14 @@ const styles = StyleSheet.create({
     elevation: 2,
   },
   create: {
-    backgroundColor: "#1384F8",
+    backgroundColor: light.background2,
     borderRadius: 50,
     marginTop: 15,
     width: 50,
     aspectRatio: 1,
     alignItems: "center",
     justifyContent: "center",
     alignSelf: "flex-end",
-    shadowColor: "#000",
     shadowOffset: {
       width: 0,
       height: 2,

diff --git a/components/List.tsx b/components/List.tsx
@@ -1,14 +1,13 @@
-import { View, StyleSheet, useColorScheme, Text } from "react-native";
+import {
+  View,
+  StyleSheet,
+  useColorScheme,
+  Text,
+  KeyboardAvoidingView,
+} 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";
@@ -59,8 +58,7 @@ const List = ({ create, taskItem, setTaskItem }: ListProp) => {
   };
 
   return (
-    <Animated.View
-      layout={CurvedTransition}
+    <KeyboardAvoidingView
       style={[
         styles.list,
         !create && DarkMode
@@ -88,7 +86,7 @@ const List = ({ create, taskItem, setTaskItem }: ListProp) => {
       ) : (
         <Empty />
       )}
-    </Animated.View>
+    </KeyboardAvoidingView>
   );
 };