formatting and itinerary

.gitignore

@@ -15,5 +15,5 @@ firebase.js
 .env
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
-
+/secrets
 /firebase

App.js

@@ -10,7 +10,11 @@ import SavedScreen from "./screens/SavedScreen";
 import SettingsScreen from "./screens/SettingsScreen";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { Ionicons, FontAwesome } from "@expo/vector-icons";
+import SpecificResidence from "./screens/SpecificResidence";
 
+
+import Listings from "./screens/Listings"
+import { TouchableOpacity } from "react-native";
 const Tab = createBottomTabNavigator();
 
 const Stack = createNativeStackNavigator();
@@ -52,6 +56,7 @@ function HomeTabs() {
 				name="Setting"
 				component={SettingsScreen}
 				options={{
+					headerShown: false,
 					tabBarLabel: "Settings",
 					tabBarIcon: ({ color, size }) => (
 						<Ionicons name="settings" size={size} color={color} />
@@ -67,7 +72,7 @@ export default function App() {
 		<NavigationContainer>
 			<Stack.Navigator
 				screenOptions={{
-					headerShown: false,
+					headerShown: false	
 				}}
 			>
 				<Stack.Screen
@@ -76,7 +81,10 @@ export default function App() {
 					component={LoginScreen}
 				/>
 				<Stack.Screen name="Home" component={HomeTabs} />
-				<Stack.Screen name="Demographic" component={Demographic} />
+				<Stack.Screen name="Demographic" component={Demographic}  />
+				<Stack.Screen name="SpecificResidence" component={SpecificResidence}/>
+				<Stack.Screen name="Listings" component={Listings}/>
+
 			</Stack.Navigator>
 		</NavigationContainer>
 	);

components/CarouselCardItem.js

@@ -1,16 +1,26 @@
 import React from "react";
-import { View, Text, StyleSheet, Dimensions, Image } from "react-native";
+import {
+	View,
+	Text,
+	StyleSheet,
+	Dimensions,
+	Image,
+	TouchableOpacity,
+	Button,
+} from "react-native";
+import { useNavigation } from "@react-navigation/native";
 import { AntDesign } from "@expo/vector-icons";
-import { TouchableOpacity } from "react-native-gesture-handler";
 import { useState } from "react";
 export const SLIDER_WIDTH = Dimensions.get("window").width + 80;
 export const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.7);
 
-export default function CarouselCardItem( {item	, index} ) {
+export default function CarouselCardItem({ item, index }) {
+	const navigation = useNavigation();
 	const [isLiked, setIsLiked] = useState(false);
 	const toggleLike = () => {
 		setIsLiked(!isLiked);
-	  }
+	};
+
 	return (
 		<View style={styles.container} key={index}>
 			<Image source={{ uri: item.imgUrl }} style={styles.image} />
@@ -22,14 +32,28 @@ export default function CarouselCardItem( {item	, index} ) {
 			>
 				<Text style={styles.header}>{item.title}</Text>
 				<TouchableOpacity onPress={toggleLike}>
-					<AntDesign name={isLiked ? "heart" : "hearto"} size={24} color="#ff7875" paddingRight={20} style={styles.header}/>
+					<AntDesign
+						name={isLiked ? "heart" : "hearto"}
+						size={24}
+						color="#ff7875"
+						paddingRight={20}
+						style={styles.header}
+					/>
 				</TouchableOpacity>
 			</View>
 
 			<Text style={styles.body}>{item.body}</Text>
+			<Button
+				onPress={() => {
+					navigation.navigate("Listings", {
+						city:item.city
+					});
+				}}
+				title={item.title}
+			/>
 		</View>
 	);
-};
+}
 
 const styles = StyleSheet.create({
 	container: {
@@ -72,4 +96,3 @@ const styles = StyleSheet.create({
 		paddingRight: 20,
 	},
 });
-

components/Review.js

@@ -0,0 +1,54 @@
+import { StyleSheet, Text, View } from "react-native";
+import React, {useState, useEffect} from "react";
+import { db } from "../firebase";
+
+
+function getDate(seconds) {
+	// var utcSeconds = 1234567890;
+	var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
+	d.setUTCSeconds(seconds);
+	const year = d.getFullYear();
+	const month = String(d.getMonth() + 1).padStart(2, "0");
+	const day = String(d.getDate()).padStart(2, "0");
+
+	// Format the date string in YYYY-MM-DD format
+	const formattedDate = month + "/" + day + "/" + year;
+	return formattedDate;
+}
+// ADD REVIEWER NAME TO PROPS
+
+const Review = ({  rating, reviewText, user_uid , date}) => {
+  const [userName, setUserName] = useState('');
+	useEffect(() => {
+		// Get a reference to the Firestore collection
+		const usersRef = db.collection("users").doc(user_uid);
+
+		// Get the name of the user
+		usersRef
+			.get()
+			.then((doc) => {
+				if (doc.exists) {
+					const userData = doc.data();
+					const userName = userData.name;
+					setUserName(userName);
+				} else {
+					console.log("No such document!");
+				}
+			})
+			.catch((error) => {
+				console.log("Error getting document:", error);
+			});
+	}, []);
+	return (
+		<View paddingLeft={20} paddingTop={50} paddingRight={25}>
+			<Text>
+				{rating} by {userName} at {getDate(date)}
+			</Text>
+			<Text> comment: {reviewText} </Text>
+		</View>
+	);
+};
+
+export default Review;
+
+const styles = StyleSheet.create({});