fix ui

assets/styles/index.ts

@@ -50,7 +50,7 @@ export default StyleSheet.create({
   descriptionCardItem: {
     color: GRAY,
     textAlign: "left",
-    width: "100%",
+    width: "75%",
     flexWrap: "wrap"
   },
   status: {

components/CardItem.tsx

 import React from "react";
 import { Text, View, Image, Dimensions, TouchableOpacity, Pressable } from "react-native";
 import Icon from "./Icon";
-import styles, { DISLIKE_ACTIONS } from "../assets/styles";
+import styles, { DISLIKE_ACTIONS, GRAY } from "../assets/styles";
 
 export type CardItemT = {
   description?: string;

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
+    "start": "expo start --tunnel",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",

screens/auth/Signup.js

@@ -25,7 +25,7 @@ export default function Signup({ navigation }) {
             userId: userCredential.user.uid,
             role: role,
             displayName: name,
-            photoURL: 'https://gravatar.com/avatar/94d45dbdba988afacf30d916e7aaad69?s=200&d=mp&r=x',
+            avatar: 'https://gravatar.com/avatar/94d45dbdba988afacf30d916e7aaad69?s=200&d=mp&r=x',
           });
         })
         .catch((err) => Alert.alert("Login error", err.message));

screens/tabs/Catsitter.js

-import { Text, View, Dimensions, TouchableOpacity, Image } from "react-native";
+import { Text, View, Dimensions, TouchableOpacity, Image, Pressable } from "react-native";
 import React, { useState, useLayoutEffect } from "react";
 import { collection, query, onSnapshot, where, and } from "firebase/firestore";
 import { database } from "../../config/firebase";
@@ -16,6 +16,7 @@ const Catsitter = ({ route }) => {
   const { id } = route.params;
 
   const [catsitter, setCatsitter] = useState({});
+  const [catsitterId, setCatsitterId] = useState("")
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -77,13 +78,11 @@ const Catsitter = ({ route }) => {
             <Icon name="heart" color={WHITE} size={13} /> {catsitter.availableTime}
           </Text>
         </View>
-        <Text >Cat Sitter Address: {catsitter.address}</Text >
-        <Text >Cat Sitter Postal Code:{catsitter.postalCode} </Text >
+        <Text >Address:{catsitter.postalCode} {catsitter.address}</Text >
 
 
         {/* NAME */}
         <Text style={nameStyle}>{catsitter.displayName}</Text>
-        <Text >Cat Sitter Age: {catsitter.age}</Text >
         <Text >Cat Sitter Price Per Night: {catsitter.price}</Text >
 
         {/* DESCRIPTION */}
@@ -99,13 +98,11 @@ const Catsitter = ({ route }) => {
 
         {/* ACTIONS */}
         <View style={styles.actionsCardItem}>
-          <TouchableOpacity style={styles.button}>
+          <Pressable>
+            <TouchableOpacity style={styles.button} onPress={() => navigation.navigate("ChatWithUser", { id: catsitter.userId })}>
               <Icon name="mail" color={LIKE_ACTIONS} size={25} />
             </TouchableOpacity>
-
-          <TouchableOpacity style={styles.button}>
-            <Icon name="close" color={DISLIKE_ACTIONS} size={25} />
-          </TouchableOpacity>
+          </Pressable>
 
         </View>
       </View>

screens/tabs/Chat.js

@@ -88,7 +88,7 @@ export default function Chat({ route }) {
         user={{
           _id: auth?.currentUser?.uid,
           name: auth?.currentUser?.displayName,
-          avatar: auth?.currentUser?.photoURL
+          avatar: auth?.currentUser?.avatar || auth?.currentUser?.photoURL
         }}
       />
     </>

screens/tabs/ChatList.js

@@ -34,7 +34,7 @@ const ChatList = () => {
 
   useLayoutEffect(() => {
     const collectionRef = collection(database, "chats");
-    const q = query(collectionRef, where("participant", "array-contains", auth.currentUser.uid), orderBy("updatedAt", "desc"));
+    const q = query(collectionRef, where("participant", "array-contains", auth.currentUser.uid));
 
     const unsubscribe = onSnapshot(q, (querySnapshot) => {
       setChats(

screens/tabs/ChatUid.js

@@ -107,7 +107,7 @@ export default function ChatUid({ route }) {
                 user={{
                     _id: auth?.currentUser?.uid,
                     name: auth?.currentUser?.displayName,
-                    avatar: auth?.currentUser?.photoURL
+                    avatar: auth?.currentUser?.avatar
                 }}
             />
         </>