added session feed page and session component with click to details

src/component/session-card/session-card-footer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 
-const SessionFooter = ({ sessionName, lastPlayed }) => {
+const SessionCardFooter = ({ sessionName, lastPlayed }) => {
 	return (
 		<View>
 			<Text style={styles.sessionName}>{sessionName}</Text>
@@ -28,4 +28,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default SessionFooter;
+export default SessionCardFooter;

src/component/session-card/session-card-header.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Image, StyleSheet, Text, View } from "react-native";
 
-const SessionHeader = ({
+const SessionCardHeader = ({
 	playerName,
 	location,
 	type,
@@ -67,4 +67,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default SessionHeader;
+export default SessionCardHeader;

src/component/session-card/session-card-stat.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 
-const AggregateStat = ({ aggregateStat, displayName, numberFormat }) => {
+const SessionCardStat = ({ aggregateStat, displayName, numberFormat }) => {
 	return (
 		<View>
 			<Text style={styles.statItem}>{displayName}</Text>
@@ -26,4 +26,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default AggregateStat;
+export default SessionCardStat;

src/component/session-card/session-card-stats-row-container.tsx

@@ -1,12 +1,17 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import AggregateStat from "./aggregate_stat";
+import SessionCardStat from "./session-card-stat";
 
-const SessionStats = ({ makePercent, medianRun, duration, shotPacing }) => {
+const SessionCardStatsRowContainer = ({
+	makePercent,
+	medianRun,
+	duration,
+	shotPacing,
+}) => {
 	return (
 		<View style={styles.statsContainer}>
 			<View>
-				<AggregateStat
+				<SessionCardStat
 					displayName="Make Percent"
 					aggregateStat={makePercent}
 					numberFormat="%"
@@ -14,7 +19,7 @@ const SessionStats = ({ makePercent, medianRun, duration, shotPacing }) => {
 			</View>
 			<View style={styles.verticalSpacer} />
 			<View>
-				<AggregateStat
+				<SessionCardStat
 					displayName="Median Run"
 					aggregateStat={medianRun}
 					numberFormat=""
@@ -22,7 +27,7 @@ const SessionStats = ({ makePercent, medianRun, duration, shotPacing }) => {
 			</View>
 			<View style={styles.verticalSpacer} />
 			<View>
-				<AggregateStat
+				<SessionCardStat
 					displayName="Time Played"
 					aggregateStat={duration}
 					numberFormat=""
@@ -30,7 +35,7 @@ const SessionStats = ({ makePercent, medianRun, duration, shotPacing }) => {
 			</View>
 			<View style={styles.verticalSpacer} />
 			<View>
-				<AggregateStat
+				<SessionCardStat
 					displayName="Shot Pacing"
 					aggregateStat={shotPacing}
 					numberFormat=""
@@ -55,4 +60,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default SessionStats;
+export default SessionCardStatsRowContainer;

src/component/session-card/session-card.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Image, StyleSheet, View } from "react-native";
-import SessionFooter from "./session_footer";
+import SessionCardFooter from "./session-card-footer";
-import SessionHeader from "./session_header";
+import SessionCardHeader from "./session-card-header";
-import SessionStats from "./session_stats";
+import SessionCardStatsRowContainer from "./session-card-stats-row-container";
 
-const StatsCard = ({
+const SessionCard = ({
 	playerName,
 	location,
 	type,
@@ -22,21 +22,21 @@ const StatsCard = ({
 	return (
 		<View style={styles.background}>
 			<View style={styles.card}>
-				<SessionHeader
+				<SessionCardHeader
 					playerName={playerName}
 					location={location}
 					type={type}
 					locationIconURL={locationIconURL}
 					profileImageURL={profileImageURL}
 				/>
-				<SessionStats
+				<SessionCardStatsRowContainer
 					makePercent={makePercent}
 					medianRun={medianRun}
 					duration={duration}
 					shotPacing={shotPacing}
 				/>
 				<Image source={imageURL} style={styles.image} />
-				<SessionFooter sessionName={sessionName} lastPlayed={lastPlayed} />
+				<SessionCardFooter sessionName={sessionName} lastPlayed={lastPlayed} />
 			</View>
 		</View>
 	);
@@ -52,4 +52,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default StatsCard;
+export default SessionCard;

src/navigation/tab-navigator.tsx

@@ -3,7 +3,8 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { Image } from "react-native";
 import CameraScreen from "../component/video/camera";
 import Profile from "../screens/profile";
-import Session from "../screens/session";
+import Session from "../screens/session-stack/session";
+import SessionFeed from "../screens/session-stack/session-feed";
 import VideoDetails from "../screens/video-stack/video-details";
 import { tabIconColors } from "../styles";
 
@@ -14,7 +15,7 @@ const RecordStack = createNativeStackNavigator();
 
 // tabBarIcon configuration should live on separate file and contain all logic/icons/rendering for the Tabs
 const tabIcons = {
-	Session: <Image source={Icon} style={{ width: 20, height: 20 }} />,
+	SessionStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
 	VideoStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
 	Profile: <Image source={Icon} style={{ width: 20, height: 20 }} />,
 };
@@ -37,6 +38,15 @@ function VideoTabStack() {
 	);
 }
 
+function SessionTabStack() {
+	return (
+		<RecordStack.Navigator screenOptions={{ headerShown: false }}>
+			<RecordStack.Screen name="SessionFeed" component={SessionFeed} />
+			<RecordStack.Screen name="Session" component={Session} />
+		</RecordStack.Navigator>
+	);
+}
+
 /**
  * Functional component creating a tab navigator with called
  * Uses React Navigation's Tab.Navigator. Customizes tab bar appearance and icons.
@@ -58,8 +68,8 @@ export default function Tabs(): React.JSX.Element {
 			})}
 		>
 			<Tab.Screen
-				name="Session"
+				name="SessionStack"
-				component={Session}
+				component={SessionTabStack}
 				options={{ tabBarLabel: "Session" }}
 			/>
 			<Tab.Screen

src/screens/session-feed.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
-import sampleSessionImage from "../assets/sample_session.png";
-import StatsCard from "../component/session-card/session-card.tsx";
-
-const SessionFeed: React.FC = () => {
-	return (
-		<View style={styles.container}>
-			<StatsCard
-				playerName="Dean Machine"
-				location="Family Billiards, San Francisco"
-				type="Straight Pool"
-				makePercent="34"
-				medianRun="7.3"
-				duration="5:03:10"
-				shotPacing="0:00:26"
-				imageURL={sampleSessionImage}
-				sessionName="Dusting off the chalk"
-				lastPlayed="Today at 2:37pm"
-				profileImageURL="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-File.png"
-				locationIconURL="https://www.shutterstock.com/image-vector/blank-map-marker-vector-illustration-260nw-1150566347.jpg"
-			/>
-		</View>
-	);
-};
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		backgroundColor: "#f0f0f0", // Light gray background
-		alignItems: "center",
-	},
-});
-
-export default SessionFeed;

src/screens/session-stack/session-feed.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import sampleSessionImage from "../../assets/sample_session.png";
+import SessionCard from "../../component/session-card/session-card.tsx";
+
+const SessionFeed: React.FC = ({ navigation }) => {
+	return (
+		<View style={styles.container}>
+			<TouchableOpacity onPress={() => navigation.push("Session")}>
+				<SessionCard
+					playerName="Dean Machine"
+					location="Family Billiards, San Francisco"
+					type="Straight Pool"
+					makePercent="34"
+					medianRun="7.3"
+					duration="5:03:10"
+					shotPacing="0:00:26"
+					imageURL={sampleSessionImage}
+					sessionName="Dusting off the chalk"
+					lastPlayed="Today at 2:37pm"
+					profileImageURL="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-File.png"
+					locationIconURL="https://www.shutterstock.com/image-vector/blank-map-marker-vector-illustration-260nw-1150566347.jpg"
+				/>
+			</TouchableOpacity>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "#f0f0f0", // Light gray background
+		alignItems: "center",
+	},
+});
+
+export default SessionFeed;

src/screens/session-stack/session.tsx

@@ -3,10 +3,10 @@ import { StyleSheet, View } from "react-native";
 import {
 	graph_data_two_measures,
 	line_chart_two_y_data,
-} from "../../test/mock/charts/mock-data";
+} from "../../../test/mock/charts/mock-data";
-import BarGraph from "../component/charts/bar-graph/bar-graph";
+import BarGraph from "../../component/charts/bar-graph/bar-graph";
-import ChartContainer from "../component/charts/container/chart-container";
+import ChartContainer from "../../component/charts/container/chart-container";
-import LineGraph from "../component/charts/line-graph/line-graph";
+import LineGraph from "../../component/charts/line-graph/line-graph";
 
 export default function SessionScreen() {
 	return (