app.json

@@ -23,13 +23,9 @@
       },
       "package": "com.anonymous.testapplication"
     },
-    // "web": {
-    //   "bundler": "metro",
-    //   "output": "static",
-    //   "favicon": "./assets/images/favicon.png"
-    // },
     "plugins": [
-      "expo-router"
+      "expo-router",
+      "expo-font"
     ],
     "experiments": {
       "typedRoutes": true

app/_layout.tsx

@@ -1,27 +1,20 @@
-import React, { useState, useEffect } from 'react';
-import { router, Stack } from 'expo-router';
+import React, { useEffect } from 'react';
+import { Slot, router, Stack } from 'expo-router';
+import { WebSocketProvider } from '../contexts/WebSocketContext';
 
 export const unstable_settings = {
-  // Ensure any route can link back to `/`
   initialRouteName: 'login',
 };
 
 export default function App() {
+  
   useEffect(() => {
     router.replace('/login');
   }, []);
 
   return (
-    <Stack
-      screenOptions={{
-        headerShown: false
-      }}
-    >
-      <Stack.Screen name="login" />
-      <Stack.Screen name="register" />
-      <Stack.Screen name="explore" />
-      <Stack.Screen name="incidents" />
-      <Stack.Screen name="landing" />
-    </Stack>
+    <WebSocketProvider>
+      <Slot />
+    </WebSocketProvider>
   );
 }

app/incidents.jsx

@@ -114,7 +114,7 @@ export default function Incidents() {
                             style={{ 
                                 color: selectedDepartmentColorPicker(selectedDepartment?.type), 
                                 fontWeight: 600, 
-                                fontSize: '14px' 
+                                fontSize: 14
                             }}
                         >
                             {selectedDepartment?.deptAbv}
@@ -177,7 +177,7 @@ export default function Incidents() {
                                                     item?.type
                                                 ), 
                                                 fontWeight: 600, 
-                                                fontSize: '16px' 
+                                                fontSize: 16
                                             }}
                                         >
                                             {item?.dept}

app/landing.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+import styled from 'styled-components';
 import { useCallFeed } from '../hooks/useCallFeed';
 import { Platform, Linking, View, ScrollView, Text, TouchableOpacity } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
@@ -10,6 +11,9 @@ import {
   PageHeader,
   PageFooter,
 } from './generalHelpers.jsx';
+import ActionSheet from 'react-native-actions-sheet';
+
+const DepartmentActionSheet = styled(ActionSheet)``;
 
 export default function Landing() {
     const actionSheetRef = useRef(null);
@@ -29,6 +33,7 @@ export default function Landing() {
         setSelectedDepartment,
         updateSelectedDepartment,
         selectedDepartmentColorPicker,
+        deptList,
     } = departments;
 
     const { Incident, Address, Person, Response } = callDetails;
@@ -188,7 +193,7 @@ export default function Landing() {
                         style={{ 
                             color: selectedDepartmentColorPicker(selectedDepartment?.type), 
                             fontWeight: 600, 
-                            fontSize: '14px' 
+                            fontSize: '14' 
                         }}
                     >
                         {selectedDepartment?.deptAbv}
@@ -835,7 +840,7 @@ export default function Landing() {
                                                     item?.type
                                                 ), 
                                                 fontWeight: 600, 
-                                                fontSize: '16px' 
+                                                fontSize: '16' 
                                             }}
                                         >
                                             {item?.dept}

app/login.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import { useFormik } from 'formik';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -21,8 +21,11 @@ import {
   TextLinkContent,
   LoginTextInput
 } from './generalHelpers.jsx';
+import { useWebSocketContext } from '../hooks/useWebSocketContext';
 
 export default function Login() {
+  const { isConnected, lastMessage, sendMessage } = useWebSocketContext();
+
     const [hidePassword, setHidePassword] = useState(true);
     const [loginButtonDisabled, setLoginButtonDisabled] = useState(true);
     const [auth, setAuth] = useState(false);
@@ -110,14 +113,20 @@ export default function Login() {
                 <Link href='./register'>
                   <TextLinkContent>Register</TextLinkContent>
                 </Link>
+              </ExtraView>
+            </StyledFormArea>
+            <Line />
+            <Text>Temporary Area:</Text>
+            <View>
               <Link href='./incidents'>
                 <TextLinkContent>Incidents</TextLinkContent>
               </Link>
               <Link href='./landing'>
                 <TextLinkContent>Landing</TextLinkContent>
               </Link>
-              </ExtraView>
-            </StyledFormArea>
+            </View>
+            <Line />
+            <Text>Socket connected: {isConnected ? '✅ Yes' : '❌ No'}</Text>
           </InnerContainer>
         </StyledContainer>
       </React.Fragment>

contexts/WebSocketContext.js

@@ -0,0 +1,50 @@
+import React, { createContext, useEffect, useRef, useState } from 'react';
+
+export const WebSocketContext = createContext(null);
+
+export const WebSocketProvider = ({ children }) => {
+  const ws = useRef(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [lastMessage, setLastMessage] = useState(null);
+
+  useEffect(() => {
+    ws.current = new WebSocket('wss://your-websocket-server.com');
+
+    ws.current.onopen = () => {
+      console.log('✅ WebSocket connected');
+      setIsConnected(true);
+    };
+
+    ws.current.onmessage = (e) => {
+      console.log('📩 Message received:', e.data);
+      setLastMessage(e.data);
+    };
+
+    ws.current.onerror = (e) => {
+      console.error('❌ WebSocket error:', e.message);
+    };
+
+    ws.current.onclose = (e) => {
+      console.log('🔌 WebSocket closed:', e.code, e.reason);
+      setIsConnected(false);
+    };
+
+    return () => {
+      ws.current?.close();
+    };
+  }, []);
+
+  const sendMessage = (msg) => {
+    if (ws.current?.readyState === WebSocket.OPEN) {
+      ws.current.send(JSON.stringify(msg));
+    } else {
+      console.warn('⚠️ WebSocket is not open. Message not sent.');
+    }
+  };
+
+  return (
+    <WebSocketContext.Provider value={{ sendMessage, lastMessage, isConnected }}>
+      {children}
+    </WebSocketContext.Provider>
+  );
+};

hooks/useWebSocketContext/index.js

@@ -0,0 +1 @@
+export { useWebSocketContext } from './useWebSocketContext';

hooks/useWebSocketContext/useWebSocketContext.js

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { WebSocketContext } from '../../contexts/WebSocketContext';
+
+export const useWebSocketContext = () => useContext(WebSocketContext);

package.json

@@ -17,38 +17,38 @@
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
     "@react-navigation/native": "^6.0.2",
-    "expo": "~51.0.24",
-    "expo-constants": "~16.0.2",
-    "expo-font": "~12.0.9",
-    "expo-linking": "~6.3.1",
-    "expo-router": "~3.5.20",
-    "expo-splash-screen": "~0.27.5",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.7",
-    "expo-web-browser": "~13.0.3",
+    "expo": "^52.0.46",
+    "expo-constants": "~17.0.8",
+    "expo-font": "~13.0.4",
+    "expo-linking": "~7.0.5",
+    "expo-router": "~4.0.20",
+    "expo-splash-screen": "~0.29.24",
+    "expo-status-bar": "~2.0.1",
+    "expo-system-ui": "~4.0.9",
+    "expo-web-browser": "~14.0.2",
     "formik": "^2.4.6",
     "healthicons-react-native": "^3.0.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.9",
     "react-native-actions-sheet": "^0.9.7",
     "react-native-dropdown-picker": "^5.4.6",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
-    "react-native-svg": "^15.7.1",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
+    "react-native-svg": "15.8.0",
     "react-native-textinput-effects": "^0.6.3",
-    "react-native-web": "~0.19.10",
+    "react-native-web": "~0.19.13",
     "styled-components": "^6.1.12"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/jest": "^29.5.12",
-    "@types/react": "~18.2.45",
+    "@types/react": "~18.3.12",
     "@types/react-test-renderer": "^18.0.7",
     "jest": "^29.2.1",
-    "jest-expo": "~51.0.3",
+    "jest-expo": "~52.0.6",
     "react-test-renderer": "18.2.0",
     "typescript": "~5.3.3"
   },

tsconfig.json

@@ -14,5 +14,5 @@
     "**/*.jsx",
     ".expo/types/**/*.ts",
     "expo-env.d.ts"
-  ]
+, "contexts/WebSocketContext.js"  ]
 }