typescript navigation error corrected

app/index.tsx

@@ -9,40 +9,22 @@ import {
 import React, { useState } from "react";
 import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 import { Link } from "expo-router";
+import { useNavigation } from "expo-router";
 
 import Header from "../components/Header";
 import CreateScrn from "../components/CreateScrn";
 import List from "../components/List";
 import FONT from "../constants/FONT";
 import { listProp, showCreateProp } from "../types/type";
 import { light, dark } from "../constants/Colors";
+import Head from "../components/Head";
 
 const Home = () => {
+  const navigation = useNavigation();
   const [create, showCreate] = useState(false);
   const [taskItem, setTaskItem] = useState<listProp[]>([]);
   const DarkMode = useColorScheme() === "dark";
 
-  const handlePress = () => {
-    showCreate(true);
-  };
-
-  const Head = ({ showCreate }: showCreateProp) => {
-    return (
-      <View style={{ flexDirection: "row", alignItems: "center", gap: 5 }}>
-        <Pressable onPress={() => showCreate(false)}>
-          <Ionicons
-            name="arrow-back-circle-outline"
-            size={30}
-            color={DarkMode ? dark.text2 : light.text2}
-          />
-        </Pressable>
-        <Text style={[styles.header1Txt, DarkMode && { color: dark.text }]}>
-          Create To-do
-        </Text>
-      </View>
-    );
-  };
-
   return (
     <View
       style={[styles.cont, DarkMode && { backgroundColor: dark.background2 }]}
@@ -66,7 +48,7 @@ const Home = () => {
         ]}
       >
         <Pressable
-          onPress={handlePress}
+          onPress={() => showCreate(true)}
           style={[create ? styles.header1 : styles.header]}
         >
           {create ? (

app/loginScreen.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+
+const LoginScreen = () => {
+  return (
+    <View>
+      <Text>LoginScreen</Text>
+    </View>
+  );
+};
+
+export default LoginScreen;
+
+const styles = StyleSheet.create({});

components/Head.tsx

@@ -0,0 +1,42 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  Pressable,
+  useColorScheme,
+} from "react-native";
+import React from "react";
+import { Ionicons } from "@expo/vector-icons";
+
+import { light, dark } from "../constants/Colors";
+import { showCreateProp } from "../types/type";
+import FONT from "../constants/FONT";
+
+const Head = ({ showCreate }: showCreateProp) => {
+  const DarkMode = useColorScheme() === "dark";
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 5 }}>
+      <Pressable onPress={() => showCreate(false)}>
+        <Ionicons
+          name="arrow-back-circle-outline"
+          size={30}
+          color={DarkMode ? dark.text2 : light.text2}
+        />
+      </Pressable>
+      <Text style={[styles.header1Txt, DarkMode && { color: dark.text }]}>
+        Create To-do
+      </Text>
+    </View>
+  );
+};
+
+export default Head;
+
+const styles = StyleSheet.create({
+  header1Txt: {
+    fontFamily: FONT.JBold,
+    fontSize: 30,
+    color: "black",
+    textAlign: "left",
+  },
+});