fix & clean

app/_layout.tsx

@@ -5,7 +5,7 @@ import {
   ThemeProvider,
 } from "@react-navigation/native";
 import { useFonts } from "expo-font";
-import { SplashScreen, Stack } from "expo-router";
+import { SplashScreen, Stack, useNavigation } from "expo-router";
 import { useEffect } from "react";
 import { useColorScheme } from "react-native";
 
@@ -39,7 +39,11 @@ export default function RootLayout() {
     <>
       {/* Keep the splash screen open until the assets have loaded. In the future, we should just support async font loading with a native version of font-display. */}
       {!loaded && <SplashScreen />}
-      {loaded && <RootLayoutNav />}
+      {loaded && (
+        <>
+          <RootLayoutNav />
+        </>
+      )}
     </>
   );
 }

app/index.tsx

@@ -8,18 +8,19 @@ import {
 } from "react-native";
 import React, { useState, useEffect } from "react";
 import { FontAwesome5 } from "@expo/vector-icons";
-import { Link } from "expo-router";
+import { Link, useRouter } from "expo-router";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
 import Header from "../components/Header";
 import CreateScrn from "../components/CreateScrn";
 import List from "../components/List";
 import FONT from "../constants/FONT";
-import { listProp, HomeScreenProps } from "../types/type";
+import { listProp } from "../types/type";
 import { light, dark } from "../constants/Colors";
 import Head from "../components/Head";
 
-const Home: React.FC<HomeScreenProps> = ({ navigation }) => {
+const Home = () => {
+  const router = useRouter();
   const [create, showCreate] = useState(false);
   const [username, setUser] = useState<string>("");
   const [taskItem, setTaskItem] = useState<listProp[]>([]);
@@ -32,7 +33,7 @@ const Home: React.FC<HomeScreenProps> = ({ navigation }) => {
   const checkUsername = async () => {
     const username = await AsyncStorage.getItem("username");
     if (!username) {
-      navigation.navigate("loginScreen");
+      router.push("./loginScreen");
     } else {
       setUser(username);
     }
@@ -42,11 +43,9 @@ const Home: React.FC<HomeScreenProps> = ({ navigation }) => {
     <View
       style={[styles.cont, DarkMode && { backgroundColor: dark.background2 }]}
     >
-      <Link href={"modal"} asChild>
-        <Pressable style={styles.history}>
-          <FontAwesome5 name="history" size={24} color="lightgray" />
-        </Pressable>
-      </Link>
+      <Pressable style={styles.history} onPress={() => router.push("./modal")}>
+        <FontAwesome5 name="history" size={24} color="lightgray" />
+      </Pressable>
       <Header user={username} />
       <View
         style={[
@@ -74,7 +73,6 @@ const Home: React.FC<HomeScreenProps> = ({ navigation }) => {
           create={create}
           showCreate={showCreate}
           setTaskItem={setTaskItem}
-          taskItem={taskItem}
         />
         <List create={create} taskItem={taskItem} setTaskItem={setTaskItem} />
       </View>

app/loginScreen.tsx

@@ -9,14 +9,13 @@ import {
 import React, { useState } from "react";
 import { Ionicons } from "@expo/vector-icons";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useNavigation } from "@react-navigation/native";
+import { useRouter } from "expo-router";
 
 import { light } from "../constants/Colors";
 import FONT from "../constants/FONT";
-import { LoginScreenProps } from "../types/type";
 
-const LoginScreen: React.FC<LoginScreenProps> = ({ navigation }) => {
-  // const navigation = useNavigation();
+const LoginScreen = () => {
+  const route = useRouter();
   const [username, setUser] = useState<string>("");
 
   const saveUser = async () => {
@@ -26,7 +25,7 @@ const LoginScreen: React.FC<LoginScreenProps> = ({ navigation }) => {
     }
 
     await AsyncStorage.setItem("username", username);
-    navigation.navigate("index");
+    route.push("index");
   };
 
   return (

app/modal.tsx

@@ -8,16 +8,15 @@ import {
 } from "react-native";
 import { dark, light } from "../constants/Colors";
 import React, { useEffect, useState } from "react";
-import { FontAwesome5, Ionicons } from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
 
 import { listProp } from "../types/type";
 import { fetchTaskItems } from "../constants/FUNT";
 import FONT from "../constants/FONT";
 import HistoryCard from "../components/historyCard";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { ModalScreenProps } from "../types/type";
 
-const ModalScreen: React.FC<ModalScreenProps> = () => {
+const ModalScreen = () => {
   const [history, setHistory] = useState<listProp[]>([]);
   const DarkMode = useColorScheme() === "dark";
 
@@ -75,6 +74,8 @@ const ModalScreen: React.FC<ModalScreenProps> = () => {
   );
 };
 
+export default ModalScreen;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

components/CreateScrn.tsx

@@ -8,9 +8,8 @@ import {
   Alert,
   useColorScheme,
 } from "react-native";
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { Entypo } from "@expo/vector-icons";
-import "react-native-get-random-values";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
 import {
@@ -20,15 +19,9 @@ import {
 } from "../constants/FUNT";
 import FONT from "../constants/FONT";
 import { createScreenProp, listProp } from "../types/type";
-// import list from "../assets/list";
 import { light, dark } from "../constants/Colors";
 
-const CreateScrn = ({
-  create,
-  showCreate,
-  setTaskItem,
-  taskItem,
-}: createScreenProp) => {
+const CreateScrn = ({ create, showCreate, setTaskItem }: createScreenProp) => {
   const [name, setName] = useState("");
   const [subject, setSubject] = useState("");
   const { date, time } = getCurrentDateAndTime();
@@ -39,9 +32,8 @@ const CreateScrn = ({
     try {
       const Data = await AsyncStorage.getItem("itemData");
       let DataArray = Data ? JSON.parse(Data) : [];
-
-      const newItem = { key, name, subject, date, time };
       const newDataArray = [...DataArray, newTask];
+
       setTaskItem(newDataArray);
       await AsyncStorage.setItem("itemData", JSON.stringify(newDataArray));
     } catch (error) {

components/List.tsx

@@ -1,7 +1,6 @@
 import { View, StyleSheet, FlatList, useColorScheme, Text } from "react-native";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { light, dark } from "../constants/Colors";
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import { FontAwesome5 } from "@expo/vector-icons";
 
 import ToDoCard from "./ToDoCard";
@@ -26,13 +25,7 @@ const List = ({ create, taskItem, setTaskItem }: ListProp) => {
 
   const renderItem = ({ item, index }: DataProp) => {
     return (
-      <ToDoCard
-        item={item}
-        index={index}
-        setTaskItem={setTaskItem}
-        taskItem={taskItem}
-        DarkMode={DarkMode}
-      />
+      <ToDoCard item={item} setTaskItem={setTaskItem} DarkMode={DarkMode} />
     );
   };
 

components/ToDoCard.tsx

@@ -14,13 +14,7 @@ import FONT from "../constants/FONT";
 import { light, dark } from "../constants/Colors";
 import { getTaskItem } from "../constants/FUNT";
 
-const ToDoCard = ({
-  item,
-  index,
-  setTaskItem,
-  taskItem,
-  DarkMode,
-}: todoCardProp) => {
+const ToDoCard = ({ item, setTaskItem, DarkMode }: todoCardProp) => {
   // deletes the task which does not add the task to the history storage
   const handleDelete = async () => {
     try {

components/historyCard.tsx

@@ -1,17 +1,9 @@
-import {
-  StyleSheet,
-  useColorScheme,
-  View,
-  Pressable,
-  Text,
-  FlatList,
-} from "react-native";
+import { StyleSheet, View, Pressable, Text } from "react-native";
 import { dark } from "../constants/Colors";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 
 import { historyCardProp } from "../types/type";
-import { fetchTaskItems } from "../constants/FUNT";
 import FONT from "../constants/FONT";
 
 const HistoryCard = ({ DarkMode, item }: historyCardProp) => {

types/type.tsx

@@ -1,5 +1,3 @@
-import { StackNavigationProp } from "@react-navigation/stack";
-
 type listProp = {
   key: string;
   name: string;
@@ -16,7 +14,6 @@ type createScreenProp = {
   create: boolean;
   showCreate: React.Dispatch<React.SetStateAction<boolean>>;
   setTaskItem: React.Dispatch<React.SetStateAction<listProp[]>>;
-  taskItem: listProp[];
 };
 
 type ListProp = {
@@ -32,9 +29,7 @@ type DataProp = {
 
 type todoCardProp = {
   item: listProp;
-  index: number;
   setTaskItem: React.Dispatch<React.SetStateAction<listProp[]>>;
-  taskItem: listProp[];
   DarkMode: boolean;
 };
 
@@ -43,24 +38,6 @@ type historyCardProp = {
   item: listProp;
 };
 
-type RootStackParamList = {
-  loginScreen: undefined;
-  index: undefined;
-  modal: undefined;
-};
-
-type LoginScreenProps = {
-  navigation: StackNavigationProp<RootStackParamList, "loginScreen">;
-};
-
-type HomeScreenProps = {
-  navigation: StackNavigationProp<RootStackParamList, "index">;
-};
-
-type ModalScreenProps = {
-  navigation: StackNavigationProp<RootStackParamList, "modal">;
-};
-
 export {
   listProp,
   todoCardProp,
@@ -69,7 +46,4 @@ export {
   ListProp,
   DataProp,
   historyCardProp,
-  LoginScreenProps,
-  HomeScreenProps,
-  ModalScreenProps,
 };