From 7daf4ba8fddbb991b5741c3bbfde4be4c7988f26 Mon Sep 17 00:00:00 2001
From: AlexanderWangY <alexander.yisu.wang@outlook.com>
Date: Sat, 2 Mar 2024 18:50:34 -0500
Subject: [PATCH] replaced stack with tabs

---
 client/package-lock.json           |  8 +++++++-
 client/package.json                |  3 ++-
 client/src/app/(home)/_layout.tsx  | 26 ++++++++++++++++++--------
 client/src/app/(home)/settings.tsx | 11 +++++++++++
 4 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 client/src/app/(home)/settings.tsx

diff --git a/client/package-lock.json b/client/package-lock.json
index 853ac67d0..69aea1cf1 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -35,7 +35,8 @@
         "react-native-screens": "~3.22.0",
         "react-native-uuid": "^2.0.1",
         "react-native-web": "~0.19.6",
-        "socket.io-client": "^4.7.4"
+        "socket.io-client": "^4.7.4",
+        "undefined": "@expo/vector-icons/FontAwesome"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0",
@@ -43,6 +44,7 @@
         "typescript": "^5.1.3"
       }
     },
+    "@expo/vector-icons/FontAwesome": {},
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -19633,6 +19635,10 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz",
       "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA=="
     },
+    "node_modules/undefined": {
+      "resolved": "@expo/vector-icons/FontAwesome",
+      "link": true
+    },
     "node_modules/undici": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici/-/undici-5.26.5.tgz",
diff --git a/client/package.json b/client/package.json
index 46a975ac9..40ebdff7d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -36,7 +36,8 @@
     "react-native-uuid": "^2.0.1",
     "react-native-web": "~0.19.6",
     "socket.io-client": "^4.7.4",
-    "expo-network": "~5.4.0"
+    "expo-network": "~5.4.0",
+    "undefined": "@expo/vector-icons/FontAwesome"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/client/src/app/(home)/_layout.tsx b/client/src/app/(home)/_layout.tsx
index fb7c6336c..ea37e8efd 100644
--- a/client/src/app/(home)/_layout.tsx
+++ b/client/src/app/(home)/_layout.tsx
@@ -1,9 +1,10 @@
 import React from "react";
-import { Stack } from "expo-router";
+import { Stack, Tabs } from "expo-router";
 import { SettingsProvider } from "../../contexts/SettingsContext";
 import { SocketProvider } from "../../contexts/SocketContext";
 import { LocationProvider } from "../../contexts/LocationContext";
 import { UserProvider } from "../../contexts/UserContext";
+import FontAwesome from "@expo/vector-icons/FontAwesome";
 
 const AuthLayout = () => {
   return (
@@ -11,13 +12,22 @@ const AuthLayout = () => {
       <SocketProvider>
         <UserProvider>
           <SettingsProvider>
-            <Stack
-              screenOptions={{
-                headerShown: false,
-              }}
-            >
-              <Stack.Screen name="chatchannel" options={{}} />
-            </Stack>
+            <Tabs screenOptions={{ tabBarActiveTintColor: 'blue' }}>
+              <Tabs.Screen
+                name="chatchannel"
+                options={{
+                  title: 'Chat',
+                  tabBarIcon: ({ color }) => <FontAwesome size={28} name="home" color={color} />,
+                }}
+              />
+              <Tabs.Screen
+                name="settings"
+                options={{
+                  title: 'Settings',
+                  tabBarIcon: ({ color }) => <FontAwesome size={28} name="cog" color={color} />,
+                }}
+              />
+            </Tabs>
           </SettingsProvider>
         </UserProvider>
       </SocketProvider>
diff --git a/client/src/app/(home)/settings.tsx b/client/src/app/(home)/settings.tsx
new file mode 100644
index 000000000..a0939e972
--- /dev/null
+++ b/client/src/app/(home)/settings.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native';
+import SettingsScreen from '../../components/Settings/SettingsScreen';
+
+const SettingsPage = () => {
+  return (
+    <SettingsScreen />
+  )
+}
+
+export default SettingsPage;
\ No newline at end of file