replaced stack with tabs

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",

client/src/app/(home)/_layout.tsx

@@ -1,23 +1,33 @@
 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 (
     <LocationProvider>
       <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>

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;