app finished with basic funcionality

app/(root)/(tabs)/chat.tsx

@@ -1,14 +1,30 @@
-import { View, Text } from "react-native"
-import { SafeAreaView } from "react-native-safe-area-context"
+import { Image, ScrollView, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import { images } from "@/constants";
 
 const Chat = () => {
-    return(
-        <SafeAreaView>
-            <Text>
-                Chat
-            </Text>
-        </SafeAreaView>
-    )
-}
+  return (
+    <SafeAreaView className="flex-1 bg-white p-5">
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+        <Text className="text-2xl font-JakartaBold">Chat</Text>
+        <View className="flex-1 h-fit flex justify-center items-center">
+          <Image
+            source={images.message}
+            alt="message"
+            className="w-full h-40"
+            resizeMode="contain"
+          />
+          <Text className="text-3xl font-JakartaBold mt-3">
+            No Messages Yet
+          </Text>
+          <Text className="text-base mt-2 text-center px-7">
+            Start a conversation with your friends and family
+          </Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
 
 export default Chat;

app/(root)/(tabs)/profile.tsx

@@ -1,14 +1,70 @@
-import { View, Text } from "react-native"
-import { SafeAreaView } from "react-native-safe-area-context"
+import { useUser } from "@clerk/clerk-expo";
+import { Image, ScrollView, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import InputField from "@/components/InputField";
 
 const Profile = () => {
-    return(
-        <SafeAreaView>
-            <Text>
-                Profile
-            </Text>
-        </SafeAreaView>
-    )
-}
+  const { user } = useUser();
+
+  return (
+    <SafeAreaView className="flex-1">
+      <ScrollView
+        className="px-5"
+        contentContainerStyle={{ paddingBottom: 120 }}
+      >
+        <Text className="text-2xl font-JakartaBold my-5">My profile</Text>
+
+        <View className="flex items-center justify-center my-5">
+          <Image
+            source={{
+              uri: user?.externalAccounts[0]?.imageUrl ?? user?.imageUrl,
+            }}
+            style={{ width: 110, height: 110, borderRadius: 110 / 2 }}
+            className=" rounded-full h-[110px] w-[110px] border-[3px] border-white shadow-sm shadow-neutral-300"
+          />
+        </View>
+
+        <View className="flex flex-col items-start justify-center bg-white rounded-lg shadow-sm shadow-neutral-300 px-5 py-3">
+          <View className="flex flex-col items-start justify-start w-full">
+            <InputField
+              label="First name"
+              placeholder={user?.firstName || "Not Found"}
+              containerStyle="w-full"
+              inputStyle="p-3.5"
+              editable={false}
+            />
+
+            <InputField
+              label="Last name"
+              placeholder={user?.lastName || "Not Found"}
+              containerStyle="w-full"
+              inputStyle="p-3.5"
+              editable={false}
+            />
+
+            <InputField
+              label="Email"
+              placeholder={
+                user?.primaryEmailAddress?.emailAddress || "Not Found"
+              }
+              containerStyle="w-full"
+              inputStyle="p-3.5"
+              editable={false}
+            />
+
+            <InputField
+              label="Phone"
+              placeholder={user?.primaryPhoneNumber?.phoneNumber || "Not Found"}
+              containerStyle="w-full"
+              inputStyle="p-3.5"
+              editable={false}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
 
 export default Profile;