chat screen ui completed

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

@@ -1,10 +1,28 @@
-import { Text } from "react-native";
+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 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>
   );
 };