app/_layout.tsx

@@ -12,7 +12,7 @@ export default function App() {
 
   useEffect(() => {
     if (auth) {
-      router.replace('/explore');
+      router.replace('./landing');
     } else {
       router.replace('/login');
     }
@@ -20,7 +20,7 @@ export default function App() {
 
   useEffect(() => {
     if (auth) {
-      router.replace('/explore');
+      router.replace('./landing');
     } else {
       router.replace('/login');
     }
@@ -35,6 +35,7 @@ export default function App() {
       <Stack.Screen name="login" />
       <Stack.Screen name="register" />
       <Stack.Screen name="explore" />
+      <Stack.Screen name="landing" />
     </Stack>
   );
 }

app/generalHelpers.jsx

@@ -208,9 +208,7 @@ export const PageHeader = ({
 }) => {
   return (
     <View style={{ position: 'sticky', top: 0, backgroundColor: '#ECEDEE', zIndex: 1, marginBottom: -80 }}>
-      <View style={{ flexDirection: 'row', height: 80, alignItems: 'flex-end' }}>
-        {children}
-      </View>
+      {children}
     </View>
   )
 }

app/landing.jsx

@@ -0,0 +1,119 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { View, ScrollView, Text, TouchableOpacity } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Ionicons } from '@expo/vector-icons';
+import {
+  PageHeader,
+  StyledContainer,
+} from './generalHelpers.jsx';
+import ActionSheet from 'react-native-actions-sheet';
+
+const typeMap = {
+    EMS: 'Medical Services',
+    Fire: 'Fire Department',
+    Rescue: 'Fire & EMS'
+}
+
+const deptList = [
+    {
+        deptId: 0,
+        dept: 'Darien EMS',
+        deptAbv: 'DEMS',
+        rank: 'Assistant Director',
+        rankAbv: 'Asst. Director',
+        type: 'EMS',
+        primary: true,
+        selected: true,
+        admin: true,
+    },
+    {
+        deptId: 1,
+        dept: 'Noroton Fire Department',
+        deptAbv: 'NFD',
+        rank: 'Lieutenant',
+        rankAbv: 'Lt.',
+        type: 'Fire',
+        primary: false,
+        selected: false,
+        admin: true,
+    },
+    {
+        deptId: 2,
+        dept: 'Stamford Fire Department',
+        deptAbv: 'SFD',
+        rank: 'Paramedic',
+        rankAbv: 'EMT-P',
+        type: 'Rescue',
+        primary: false,
+        selected: false,
+        admin: true,
+    },
+]
+
+export default function Landing() {
+    const actionSheetRef = useRef(null);
+    const selectedDepartment = deptList?.find((dept) => {
+        return dept?.selected;
+    });
+
+    const updateSelectedDepartment = (currentSelectedId, newSelectedId) => {
+        console.log('items: ', currentSelectedId, newSelectedId);
+    };
+  
+    return (
+      <React.Fragment>
+        <PageHeader>
+            <View style={{ flexDirection: 'column', height: 80, alignItems: 'center', justifyContent: 'flex-end', paddingBottom: 8 }}>
+                <TouchableOpacity onPress={() => {
+                    actionSheetRef.current?.show();
+                }}>
+                    <Text style={{ color: 'red', fontWeight: 600, fontSize: '16px' }}>{selectedDepartment?.deptAbv}</Text>
+                </TouchableOpacity>
+            </View>
+        </PageHeader>
+        <StyledContainer>
+            <StatusBar style="dark" />
+            <SafeAreaView />
+        </StyledContainer>
+        <ActionSheet 
+            ref={actionSheetRef}
+            gestureEnabled
+            containerStyle={{
+                height: "50%",
+                width: "100%",
+                backgroundColor: '#ECEDEE',
+            }}
+        >
+            <View style={{ flexDirection: 'column', padding: 20 }}>
+                {deptList?.map((item) => {
+                    return (
+                        <View style={{ padding: 2 }} key={item?.deptId}>
+                            <TouchableOpacity 
+                                style={{
+                                    borderRadius: 6,
+                                    elevation: 3,
+                                    backgroundColor: item?.selected ? 'grey' : '#fff',
+                                    shadowOffset: { width: 1, height: 1 },
+                                    shadowColor: '#333',
+                                    shadowOpacity: 0.3,
+                                    shadowRadius: 2,
+                                    marginHorizontal: 20,
+                                    marginVertical: 6,
+                                    padding: 10
+                                }}
+                            >
+                                <View style={{ flexDirection: 'row' }}>
+                                    <Text style={{ color: 'black', fontWeight: 600, fontSize: '16px' }}>{item?.dept}</Text>
+                                    {item?.primary ? <Text>*</Text> : null}
+                                </View>
+                                <Text>{`${item?.deptAbv} - ${typeMap[item?.type]}`}</Text>
+                            </TouchableOpacity>
+                        </View>
+                    );
+                })}
+            </View>
+        </ActionSheet>
+      </React.Fragment>
+    );
+  }

app/login.jsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
+import { View } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import { useFormik } from 'formik';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { Link } from 'expo-router';
+import { router, Link } from 'expo-router';
 import {
   PageHeader,
   StyledContainer,
@@ -24,6 +25,7 @@ import {
 export default function TabLayout() {
     const [hidePassword, setHidePassword] = useState(true);
     const [loginButtonDisabled, setLoginButtonDisabled] = useState(true);
+    const [auth, setAuth] = useState(true);
 
     const formik = useFormik({
       initialValues: {
@@ -33,6 +35,7 @@ export default function TabLayout() {
       onSubmit: (values) => {
         values.number = values.number.replace(/[()\-\s]/g, '');
         console.log(values);
+        setAuth(true);
       },
     });
 
@@ -47,10 +50,18 @@ export default function TabLayout() {
         }
       }
     }, [formValues])
+
+    useEffect(() => {
+      if (auth) {
+        router.navigate('./landing');
+      }
+    }, [auth])
   
     return (
       <React.Fragment>
-        <PageHeader />
+        <PageHeader>
+          <View style={{ flexDirection: 'row', height: 80, alignItems: 'center' }} />
+        </PageHeader>
         <StyledContainer>
           <StatusBar style="dark" />
           <SafeAreaView />

package-lock.json

@@ -23,6 +23,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.74.3",
+        "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",
@@ -15817,6 +15818,17 @@
         }
       }
     },
+    "node_modules/react-native-actions-sheet": {
+      "version": "0.9.7",
+      "resolved": "https://registry.npmjs.org/react-native-actions-sheet/-/react-native-actions-sheet-0.9.7.tgz",
+      "integrity": "sha512-rjUwxUr5dxbdSLDtLDUFAdSlFxpNSpJsbXLhHkBzEBMxEMPUhRT3zqbvKqsPj0JUkjwuRligxrhbIJZkg/6ZDw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-native": "*",
+        "react-native-gesture-handler": "*",
+        "react-native-safe-area-context": "*"
+      }
+    },
     "node_modules/react-native-dropdown-picker": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.6.tgz",

package.json

@@ -30,6 +30,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.3",
+    "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",