fixed null bug in the park list display

app/index.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import {View, Text } from "react-native";
 import { useTheme } from "react-native-paper";
 import Profile from "@/components/Profile";
+import LocationScreen from "@/components/Location";
 import Status from "@/components/Status";
 import TopNav from "@/components/TopNav";
-import BottomNav from "@/components/BottomNav"
+import DrawerMenu from "@/components/DrawerMenu";
+import Dialogs from "@/components/Dialogs";
 import { useUser } from "@/context/UserContext";
 import styles from "@/assets/styles";
 import log from "@/util/log"
@@ -15,11 +17,23 @@ const Index = () => {
     const {
         isProfileActive,
         setProfileActive,
+        isMenuActive,
+        setMenuActive,
+        setAboutActive,
+        isAboutActive,
+        setPrivacyActive,
+        isPrivacyActive,
+        setBugActive,
+        isBugActive,
+        setLocationActive,
+        isLocationActive,
         userId,
         userName,
         setUserName,
         userImage,
         setUserImage,
+        park,
+        setPark,
         userStatus,
         setUserStatus,
         setUserDataChanged,
@@ -39,8 +53,25 @@ const Index = () => {
 
     return (
         <View style={[styles.indexContainer, { backgroundColor: theme.colors.background }]}>
-            <TopNav
+            <DrawerMenu
+                isMenuActive={isMenuActive}
+                onClose={() => setMenuActive(false)}
+                toggleAbout={() => setAboutActive(!isAboutActive)}
+                togglePrivacy={() => setPrivacyActive(!isPrivacyActive)}
+                toggleBug={() => setBugActive(!isBugActive)}
                 toggleProfile={() => setProfileActive(true)}
+                toggleLocation={() => setLocationActive(true)}
+            />
+            <Dialogs
+                aboutVisible={isAboutActive}
+                privacyVisible={isPrivacyActive}
+                bugVisible={isBugActive}
+                toggleAbout={() => setAboutActive(!isAboutActive)}
+                togglePrivacy={() => setPrivacyActive(!isPrivacyActive)}
+                toggleBug={() => setBugActive(!isBugActive)}
+            />
+            <TopNav
+                toggleMenu={() => setMenuActive(!isMenuActive)}
             />
             <Status
                 id={userId}
@@ -50,6 +81,7 @@ const Index = () => {
                 setStatus={setUserStatus}
                 currentTheme={currentTheme}
                 isProfileActive={isProfileActive}
+                isMenuActive={isMenuActive}
             />
             <Profile
                 visible={isProfileActive}
@@ -63,8 +95,13 @@ const Index = () => {
                 setChanged={setUserDataChanged}
                 onClose={() => setProfileActive(false)}
             />
-            <BottomNav
+            <LocationScreen
-                isProfileActive={isProfileActive}
+                visible={isLocationActive}
+                currentTheme={currentTheme}
+                park={park}
+                setPark={setPark}
+                setChanged={setUserDataChanged}
+                onClose={() => setLocationActive(false)}
             />
         </View>
     );

assets/styles.ts

@@ -79,7 +79,13 @@ const styles = StyleSheet.create({
     //Nav
     logoContainer: { flex: 1, alignItems: "center" },
     logo: { width: 140, height: 70 },
-    topBar: { },
+    topBar: {
+        zIndex: 4,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: "100%",
+        alignSelf: "stretch"
+    },
     bottomBar: { height: 38 },
     //index
     indexImageBackground: {
@@ -90,6 +96,30 @@ const styles = StyleSheet.create({
         opacity: 0.3,          // Fades the image
     },
     indexContainer: { flex: 1, alignItems: "stretch" },
+    overlay: {
+
+    },
+    drawerContainer: {
+        ...StyleSheet.absoluteFillObject,
+        marginTop: 0,
+        width: 200,
+        height: "auto",
+        //elevation: 4,
+        //backgroundColor: "rgba(0, 0, 0, 0.5)",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        zIndex: 5, // Ensures the drawer is above everything
+        elevation: 5, // Android shadow priority
+        //borderRadius: 10,
+    },
+    footer: {
+        padding: 16,
+        alignItems: "center",
+    },
+    closeText: {
+        color: "#6200ee",
+        fontWeight: "bold",
+    },
 });
 
 export default styles;

components/BottomNav.tsx

@@ -2,20 +2,19 @@ import {Appbar, Portal, Button, Dialog, Text, useTheme } from "react-native-pape
 import { View } from "react-native";
 import styles from "@/assets/styles";
 import React, {useState} from "react";
-import Location from "@/components/Location";
 import Broken from "@/components/Broken";
 
-
 interface BNProps {
     isProfileActive: boolean;
+    isMenuActive: boolean;
 }
-const BottomNav: React.FC<BNProps> = ({ isProfileActive })  => {
+
+const BottomNav: React.FC<BNProps> = ({ isProfileActive, isMenuActive })  => {
     const theme = useTheme();
     const [menuVisible, setMenuVisible] = useState(false);
 
-
     return (
-        <View style={ isProfileActive && { display: 'none' }}>
+        <View style={ (isProfileActive || isMenuActive )&& { display: 'none' }}>
             <View style={{ backgroundColor: theme.colors.background }}>
                 <Appbar.Header style={[styles.bottomBar, { backgroundColor: theme.colors.primaryContainer }]} >
                     <View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}>

components/Broken.tsx

@@ -1,9 +1,7 @@
-import {Title, useTheme} from "react-native-paper";
+import { Title, useTheme } from "react-native-paper";
 import { Image, View } from "react-native";
 import React from "react";
 
-
-
 const Broken = () => {
     const theme = useTheme();
     return (

components/Dialogs.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Portal, Button, Dialog, useTheme } from "react-native-paper";
+import About from "@/components/About";
+import Privacy from "@/components/Privacy";
+import Broken from "@/components/Broken";
+
+
+interface DialogsProps {
+    aboutVisible: boolean;
+    privacyVisible: boolean;
+    bugVisible: boolean;
+    toggleAbout: () => void;
+    togglePrivacy: () => void;
+    toggleBug: () => void;
+}
+
+const Dialogs: React.FC<DialogsProps> = ({ aboutVisible, privacyVisible, bugVisible, toggleAbout, togglePrivacy, toggleBug }) => {
+    const theme = useTheme();
+    return (
+        <Portal>
+            <Dialog visible={aboutVisible} onDismiss={() => toggleAbout()}
+                    style={{backgroundColor: theme.colors.primaryContainer}}>
+                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>About Us</Dialog.Title>
+                <About/>
+                <Dialog.Actions style={{justifyContent: "center"}}>
+                    <Button onPress={() => toggleAbout()} mode="contained"
+                            style={{backgroundColor: theme.colors.inversePrimary}}
+                            labelStyle={{color: theme.colors.primary}}>
+                        Close
+                    </Button>
+                </Dialog.Actions>
+            </Dialog>
+            <Dialog visible={privacyVisible} onDismiss={() => togglePrivacy()}
+                    style={{backgroundColor: theme.colors.primaryContainer}}>
+                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Privacy Policy</Dialog.Title>
+                <Privacy/>
+                <Dialog.Actions style={{justifyContent: "center"}}>
+                    <Button onPress={() => togglePrivacy()} mode="contained"
+                            style={{backgroundColor: theme.colors.inversePrimary}}
+                            labelStyle={{color: theme.colors.primary}}>
+                        Close
+                    </Button>
+                </Dialog.Actions>
+            </Dialog>
+            <Dialog visible={bugVisible} onDismiss={() => toggleBug()}
+                    style={{backgroundColor: theme.colors.primaryContainer}}>
+                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Report A Bug</Dialog.Title>
+                <Broken/>
+                <Dialog.Actions style={{justifyContent: "center"}}>
+                    <Button onPress={() => toggleBug()} mode="contained"
+                            style={{backgroundColor: theme.colors.inversePrimary}}
+                            labelStyle={{color: theme.colors.primary}}>
+                        Close
+                    </Button>
+                </Dialog.Actions>
+            </Dialog>
+        </Portal>
+    )
+}
+
+export default Dialogs;

components/DrawerMenu.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { View } from "react-native";
+import { Appbar,Drawer, useTheme } from "react-native-paper";
+import styles from "@/assets/styles";
+
+interface DrawerMenuProps {
+    isMenuActive: boolean;
+    onClose: () => void;
+    toggleAbout: () => void;
+    togglePrivacy: () => void;
+    toggleBug: () => void;
+    toggleProfile: () => void;
+    toggleLocation: () => void;
+}
+
+const DrawerMenu: React.FC<DrawerMenuProps> = ({ isMenuActive, onClose, toggleAbout, togglePrivacy, toggleBug, toggleProfile, toggleLocation }) => {
+    const theme = useTheme();
+    if (!isMenuActive) {
+        return null;
+    }
+    return (
+        <View style={[styles.drawerContainer, { backgroundColor: theme.colors.background }]}>
+            <Appbar.BackAction onPress={() => onClose()} />
+            <Drawer.Section>
+                <Drawer.Item label="Profile" onPress={() => { toggleProfile(); onClose(); }} />
+                <Drawer.Item label="Location" onPress={() => { toggleLocation(); onClose(); }} />
+            </Drawer.Section>
+            <Drawer.Section showDivider={false}>
+                <Drawer.Item label="About Us" onPress={() => { toggleAbout(); onClose(); }} />
+                <Drawer.Item label="Privacy Policy" onPress={() => { togglePrivacy(); onClose(); }} />
+                <Drawer.Item label="Report a Bug" onPress={() => { toggleBug(); onClose(); }} />
+            </Drawer.Section>
+        </View>
+    );
+};
+
+export default DrawerMenu;

components/Location.tsx

@@ -1,10 +1,270 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
-import Broken from "@/components/Broken";
+import { Dialog, TextInput, useTheme, Button, Text, List, Portal } from "react-native-paper";
+import { View, FlatList } from "react-native";
+import Slider from "@react-native-community/slider";
+import axios from "axios";
+import * as Location from "expo-location";
+import log from "@/util/log";
 
-const Location = () => {
+interface LocationScreenProps {
-    return (
+    visible: boolean;
-        <Broken />
+    setChanged: (dataChanged: boolean) => void;
-    )
+    currentTheme: string;
+    park: string;
+    setPark: (data: string) => void;
+    onClose: () => void;
 }
 
-export default Location;
+interface Park {
+    Id: string;
+    name: string;
+    address: string;
+    city: string;
+    state: string;
+    zip: string;
+    location: {
+        coordinates: [number, number];
+    };
+}
+
+export const API_URL = process.env.EXPO_PUBLIC_API_URL;
+const BUTTON_WIDTH = 260;
+
+const LocationScreen: React.FC<LocationScreenProps> = ({ visible, park, setPark, setChanged, onClose }) => {
+    const theme = useTheme();
+    const [zip, setZip] = useState("");
+    const [distance, setDistance] = useState(25);
+    const [loading, setLoading] = useState(false);
+    const [locLoading, setLocLoading] = useState(false);
+    const [parks, setParks] = useState<Park[]>([]);
+    const [hasSearched, setHasSearched] = useState(false);
+    const [selectedPark, setSelectedPark] = useState<Park | null>(null);
+
+    useEffect(() => {
+        if (visible) {
+            if (park) {
+                setSelectedPark(JSON.parse(park) as Park | null);
+            }
+        }
+    }, [visible]);
+
+    // Call the parks endpoint with coordinates
+    const fetchNearbyParks = async (longitude: number, latitude: number) => {
+        try {
+            const response = await axios.post(API_URL + "/parkLookup", { "Lon": longitude, "Lat": latitude, "Dist": distance });
+            log.debug("Nearby Parks:", response.data);
+            setParks(response.data);
+        } catch (err) {
+            log.error("Nearby Parks Error:", err);
+            setParks([]);
+        } finally {
+            setHasSearched(true);
+        }
+    };
+
+    // Zip code handler
+    const handleSubmit = async () => {
+        if (!zip) return;
+        setLoading(true);
+        try {
+            const response = await axios.post(API_URL + "/zipLookup", { zip });
+            log.debug("Zip Lookup Response:", response.data);
+            const longitude = response.data[0];
+            const latitude = response.data[1];
+            await fetchNearbyParks(longitude, latitude);
+        } catch (err) {
+            log.error(err);
+        }
+        setLoading(false);
+    };
+
+    // Geolocation handler
+    const handleGetLocation = async () => {
+        setLocLoading(true);
+        try {
+            let { status } = await Location.requestForegroundPermissionsAsync();
+            if (status !== 'granted') {
+                log.error("Permission to access location was denied");
+                setLocLoading(false);
+                return;
+            }
+            let location = await Location.getCurrentPositionAsync({});
+            const { longitude, latitude } = location.coords;
+            log.debug([longitude, latitude]);
+            await fetchNearbyParks(longitude, latitude);
+        } catch (err) {
+            log.error("Location Error:", err);
+        }
+        setLocLoading(false);
+    };
+
+    // Render each park item
+    const renderItem = ({ item }: { item: Park }) => (
+        <List.Item
+            title={item.name}
+            description={
+                `${item.address}\n${item.city}, ${item.state} ${item.zip}`
+            }
+            left={props => <List.Icon {...props} icon="paw" />}
+            style={{
+                backgroundColor: theme.colors.surface,
+                borderRadius: 8,
+                marginBottom: 8,
+                elevation: 1,
+            }}
+            titleStyle={{ fontWeight: "bold" }}
+            descriptionNumberOfLines={2}
+            onPress={() => {
+                setSelectedPark(item);
+                const parkString = JSON.stringify(item)
+                if ( park !== parkString ) {
+                    setChanged(true);
+                }
+                setPark(parkString);
+                setParks([]);
+                setHasSearched(false);
+            }}
+        />
+    );
+
+    return (
+        <Portal>
+            <Dialog visible={visible}
+                onDismiss={onClose}
+                style={{ backgroundColor: theme.colors.background }} >
+                <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Location</Dialog.Title>
+                <Dialog.Content style={{ maxHeight: 500, justifyContent: "center", alignItems: "center" }}>
+                    <View style={{ alignItems: "center", width: "100%" }}>
+                        {/* If a park is selected, show only that park info and change button */}
+                        {selectedPark ? (
+                            <View style={{ width: BUTTON_WIDTH, alignItems: "center" }}>
+                                <List.Item
+                                    title={selectedPark.name}
+                                    description={
+                                        `${selectedPark.address}\n${selectedPark.city}, ${selectedPark.state} ${selectedPark.zip}`
+                                    }
+                                    left={props => <List.Icon {...props} icon="paw" />}
+                                    style={{
+                                        backgroundColor: theme.colors.surface,
+                                        borderRadius: 8,
+                                        marginBottom: 8,
+                                        elevation: 1,
+                                        width: "100%"
+                                    }}
+                                    titleStyle={{ fontWeight: "bold" }}
+                                    descriptionNumberOfLines={2}
+                                />
+                                <Button
+                                    mode="outlined"
+                                    onPress={() => {
+                                        setSelectedPark(null);
+                                        setParks([]);
+                                        setHasSearched(false);
+                                    }}
+                                    style={{ marginTop: 16, width: "100%" }}
+                                >
+                                    Change Park
+                                </Button>
+                            </View>
+                        ) : (
+                            // Otherwise show location lookup tools and park list
+                            <>
+                                <Button
+                                    mode="outlined"
+                                    onPress={handleGetLocation}
+                                    loading={locLoading}
+                                    disabled={locLoading}
+                                    style={{ marginBottom: 12, width: BUTTON_WIDTH }}
+                                >
+                                    Use My Location
+                                </Button>
+                                <Text style={{ marginBottom: 12, color: theme.colors.primary, fontWeight: "bold" }}>OR</Text>
+                                <View style={{
+                                    flexDirection: "row",
+                                    alignItems: "center",
+                                    width: BUTTON_WIDTH,
+                                    justifyContent: "center",
+                                    marginBottom: 4,
+                                }}>
+                                    <TextInput
+                                        label="Enter Zip Code"
+                                        mode="outlined"
+                                        value={zip}
+                                        onChangeText={setZip}
+                                        style={{
+                                            flex: 3,
+                                            marginRight: 6,
+                                            fontFamily: "SpaceReg",
+                                            minWidth: 0,
+                                        }}
+                                        placeholderTextColor={theme.colors.primary}
+                                        textColor={theme.colors.primary}
+                                        theme={{ colors: { text: theme.colors.primary } }}
+                                    />
+                                    <Button
+                                        mode="contained"
+                                        onPress={handleSubmit}
+                                        loading={loading}
+                                        disabled={!zip || loading}
+                                        style={{
+                                            flex: 2,
+                                            minWidth: 0,
+                                            height: 50,
+                                        }}
+                                        contentStyle={{ height: 50 }}
+                                    >
+                                        Submit
+                                    </Button>
+                                </View>
+                                <View style={{ width: BUTTON_WIDTH, marginTop: 10, alignItems: "center" }}>
+                                    <Text style={{ color: theme.colors.primary, marginBottom: 2 }}>
+                                        Distance: {distance} mile{distance !== 1 ? "s" : ""}
+                                    </Text>
+                                    <Slider
+                                        style={{ width: "100%", height: 36 }}
+                                        minimumValue={1}
+                                        maximumValue={40}
+                                        step={1}
+                                        value={distance}
+                                        onValueChange={setDistance}
+                                        minimumTrackTintColor={theme.colors.primary}
+                                        maximumTrackTintColor={theme.colors.onSurfaceDisabled || "#ccc"}
+                                        thumbTintColor={theme.colors.primary}
+                                    />
+                                </View>
+                                {/* Parks List */}
+                                {hasSearched && (
+                                    <View style={{ width: BUTTON_WIDTH, marginTop: 18, maxHeight: 200 }}>
+                                        <Text style={{
+                                            fontWeight: "bold",
+                                            fontSize: 18,
+                                            marginBottom: parks != null ? 8 : 2,
+                                            color: theme.colors.primary
+                                        }}>
+                                            Nearby Dogparks
+                                        </Text>
+                                        { parks != null ? (
+                                            <FlatList
+                                                data={parks}
+                                                keyExtractor={(item) => item.Id}
+                                                renderItem={renderItem}
+                                                showsVerticalScrollIndicator={false}
+                                                style={{ maxHeight: 170 }}
+                                            />
+                                        ) : (
+                                            <Text style={{ color: theme.colors.onSurface, textAlign: "center", marginTop: 12 }}>
+                                                No parks found in range.
+                                            </Text>
+                                        )}
+                                    </View>
+                                )}
+                            </>
+                        )}
+                    </View>
+                </Dialog.Content>
+            </Dialog>
+        </Portal>
+    );
+};
+
+export default LocationScreen;

components/Status.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState, useRef } from "react";
 import useWebSocket from "react-use-websocket";
 import axios from "axios";
-import {Animated, Easing, ImageBackground, ScrollView, useColorScheme, View} from "react-native";
+import { Animated, Easing, ImageBackground, ScrollView, useColorScheme, View } from "react-native";
-import { Avatar, List, Button, useTheme,  } from "react-native-paper";
+import { Avatar, List, Button, useTheme } from "react-native-paper";
 import themes from "@/assets/themes";
 import styles from "@/assets/styles";
 import log from "@/util/log"
@@ -27,9 +27,10 @@ interface StatusProps {
     setStatus: (currentStatus: string) => void;
     currentTheme: string;
     isProfileActive: boolean;
+    isMenuActive: boolean;
 }
 
-const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive })  => {
+const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive, isMenuActive })  => {
     log.debug("WebSocket URL: ", WS_URL);
     log.debug("API URL: ", API_URL);
     const theme = useTheme();
@@ -209,6 +210,7 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
             <View style={styles.buttonContainer}>
                 <Button
                     mode="contained"
+                    disabled={isMenuActive}
                     onPress={() => handleStatusPress("On the Way")}
                     style={[
                         styles.actionButton,
@@ -219,6 +221,7 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
                 </Button>
                 <Button
                     mode="contained"
+                    disabled={isMenuActive}
                     onPress={() => handleStatusPress("Arrived")}
                     style={[
                         styles.actionButton,

components/TopNav.tsx

@@ -1,34 +1,18 @@
-import {Appbar, Portal, Button, Dialog, Menu, useTheme} from "react-native-paper";
+import { Appbar, useTheme } from "react-native-paper";
-import {Image, useColorScheme, View} from "react-native";
+import { Image, useColorScheme, View } from "react-native";
-import React, {useState} from "react";
+import React from "react";
 import styles from "@/assets/styles";
-import About from "@/components/About";
-import Privacy from "@/components/Privacy";
-import Broken from "@/components/Broken";
 
-const TopNav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
+const TopNav = ({ toggleMenu }: { toggleMenu: () => void; }) => {
     const theme = useTheme();
     const colorScheme = useColorScheme();
-    const [aboutVisible, setAboutVisible] = useState(false);
-    const [privacyVisible, setPrivacyVisible] = useState(false);
-    const [bugVisible, setBugVisible] = useState(false);
-    const [menuVisible, setMenuVisible] = useState(false);
-    const [menuAnchor, setMenuAnchor] = useState<{ x: number; y: number } | null>(null);
 
     return (
         <View style={{ backgroundColor: theme.colors.background }}>
             <Appbar.Header style={[styles.topBar, { backgroundColor: theme.colors.primaryContainer }]}>
                 <View>
-                    <Menu visible={menuVisible} onDismiss={() => setMenuVisible(false)} anchor={menuAnchor} style={{ backgroundColor: theme.colors.primaryContainer }}>
-                        <Menu.Item onPress={() => { setMenuVisible(false); setAboutVisible(true);}} title="About Us" style={{ backgroundColor: theme.colors.primaryContainer }}/>
-                        <Menu.Item onPress={() => { setMenuVisible(false); setPrivacyVisible(true);}} title="Privacy Policy" style={{ backgroundColor: theme.colors.primaryContainer }}/>
-                        <Menu.Item onPress={() => { setMenuVisible(false); setBugVisible(true);}} title="Report a Bug" style={{ backgroundColor: theme.colors.primaryContainer }}/>
-                    </Menu>
                     <Appbar.Action icon="menu"
-                        onPressIn={(event) => {
+                        onPress={toggleMenu}
-                            setMenuAnchor({ x: event.nativeEvent.pageX, y: event.nativeEvent.pageY + 40 });
-                            setMenuVisible(true);
-                        }}
                         iconColor={theme.colors.primary} />
                 </View>
                 <View style={styles.logoContainer} >
@@ -37,37 +21,8 @@ const TopNav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
                             require("../assets/images/pogdark_logo_inverse.png") : require("../assets/images/pogdark_logo.png")
                     } style={styles.logo} resizeMode={"contain"} />
                 </View>
-                <Appbar.Action icon="pencil" onPress={toggleProfile} iconColor={ theme.colors.primary } />
+                <Appbar.Action icon="pencil" color={ theme.colors.primaryContainer } />
             </Appbar.Header>
-            <Portal>
-                <Dialog visible={aboutVisible} onDismiss={() => setAboutVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}>
-                    <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>About Us</Dialog.Title>
-                    <About />
-                    <Dialog.Actions style={{ justifyContent: "center" }}>
-                        <Button onPress={() => setAboutVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
-                            Close
-                        </Button>
-                    </Dialog.Actions>
-                </Dialog>
-                <Dialog visible={privacyVisible} onDismiss={() => setPrivacyVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}>
-                    <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Privacy Policy</Dialog.Title>
-                    <Privacy />
-                    <Dialog.Actions style={{ justifyContent: "center" }}>
-                        <Button onPress={() => setPrivacyVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
-                            Close
-                        </Button>
-                    </Dialog.Actions>
-                </Dialog>
-                <Dialog visible={bugVisible} onDismiss={() => setBugVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}>
-                    <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Report A Bug</Dialog.Title>
-                    <Broken />
-                    <Dialog.Actions style={{ justifyContent: "center" }}>
-                        <Button onPress={() => setBugVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
-                            Close
-                        </Button>
-                    </Dialog.Actions>
-                </Dialog>
-            </Portal>
         </View>
     );
 };

context/UserContext.tsx

@@ -11,11 +11,23 @@ export const API_URL = process.env.EXPO_PUBLIC_API_URL;
 interface UserContextType {
     isProfileActive: boolean;
     setProfileActive: (active: boolean) => void;
+    isMenuActive: boolean;
+    setMenuActive: (active: boolean) => void;
+    isAboutActive: boolean;
+    setAboutActive: (active: boolean) => void;
+    isPrivacyActive: boolean;
+    setPrivacyActive: (active: boolean) => void;
+    isBugActive: boolean;
+    setBugActive: (active: boolean) => void;
+    isLocationActive: boolean;
+    setLocationActive: (active: boolean) => void;
     userId: string;
     userName: string;
     setUserName: (name: string) => void;
     userImage: string;
     setUserImage: (image: string) => void;
+    park: string;
+    setPark: (park: string) => void;
     userStatus: string;
     setUserStatus: (status: string) => void;
     setUserDataChanged: (changed: boolean) => void;
@@ -34,9 +46,15 @@ interface UserProviderProps {
 
 export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
     const [isProfileActive, setProfileActive] = useState(false);
+    const [isMenuActive, setMenuActive] = useState(false);
+    const [isAboutActive, setAboutActive] = useState(false);
+    const [isPrivacyActive, setPrivacyActive] = useState(false);
+    const [isBugActive, setBugActive] = useState(false);
+    const [isLocationActive, setLocationActive] = useState(false);
     const [userId, setUserId] = useState("");
     const [userName, setUserName] = useState("");
     const [userImage, setUserImage] = useState("");
+    const [park, setPark] = useState("");
     const [userStatus, setUserStatus] = useState("none");
     const [userDataChanged, setUserDataChanged] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
@@ -50,7 +68,8 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
                 const storedUserName = await AsyncStorage.getItem("userName");
                 const storedUserImage = await AsyncStorage.getItem("userImage");
                 const storedUserTheme = await AsyncStorage.getItem("theme");
-                log.debug("Stored theme: ", storedUserTheme);
+                const storedPark = await AsyncStorage.getItem("park");
+                log.debug("Stored park: ", storedPark);
                 if (storedUserId) {
                     setUserId(storedUserId);
                     setUserName(storedUserName || "");
@@ -64,6 +83,13 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
                     setTheme("blue")
                     setProfileActive(true);
                 }
+                if(storedPark) {
+                    setPark(storedPark);
+                    setLocationActive(false);
+                } else {
+                    setPark("");
+                    setLocationActive(true);
+                }
             } catch (error) {
                 log.error("Error loading user data:", error);
             } finally {
@@ -83,7 +109,8 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
                 await AsyncStorage.setItem("userName", userName);
                 await AsyncStorage.setItem("userImage", userImage);
                 await AsyncStorage.setItem("theme", currentTheme);
-                log.debug("Current theme: ", currentTheme);
+                await AsyncStorage.setItem("park", park);
+                log.debug("Current park: ", park);
                 setUserDataChanged(false);
             } catch (error) {
                 log.error("Error saving user data:", error);
@@ -130,11 +157,23 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
             value={{
                 isProfileActive,
                 setProfileActive,
+                isMenuActive,
+                setMenuActive,
+                isAboutActive,
+                setAboutActive,
+                isPrivacyActive,
+                setPrivacyActive,
+                isBugActive,
+                setBugActive,
+                isLocationActive,
+                setLocationActive,
                 userId,
                 userName,
                 setUserName,
                 userImage,
                 setUserImage,
+                park,
+                setPark,
                 userStatus,
                 setUserStatus,
                 setUserDataChanged,

package-lock.json

@@ -11,6 +11,7 @@
         "@expo/metro-runtime": "~4.0.1",
         "@expo/vector-icons": "^14.0.2",
         "@react-native-async-storage/async-storage": "~2.1.1",
+        "@react-native-community/slider": "^4.5.6",
         "@react-navigation/bottom-tabs": "^7.2.0",
         "@react-navigation/native": "^7.0.14",
         "axios": "~1.8.4",
@@ -21,6 +22,7 @@
         "expo-haptics": "~14.0.1",
         "expo-image-picker": "~16.0.6",
         "expo-linking": "~7.0.4",
+        "expo-location": "^18.0.10",
         "expo-router": "~4.0.16",
         "expo-splash-screen": "~0.29.20",
         "expo-status-bar": "~2.0.1",
@@ -3597,6 +3599,12 @@
         "react-native": "^0.0.0-0 || >=0.65 <1.0"
       }
     },
+    "node_modules/@react-native-community/slider": {
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@react-native-community/slider/-/slider-4.5.6.tgz",
+      "integrity": "sha512-UhLPFeqx0YfPLrEz8ffT3uqAyXWu6iqFjohNsbp4cOU7hnJwg2RXtDnYHoHMr7MOkZDVdlLMdrSrAuzY6KGqrg==",
+      "license": "MIT"
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.77.1",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.77.1.tgz",
@@ -7308,6 +7316,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-location": {
+      "version": "18.0.10",
+      "resolved": "https://registry.npmjs.org/expo-location/-/expo-location-18.0.10.tgz",
+      "integrity": "sha512-R0Iioz0UZ9Ts8TACPngh8uDFbajJhVa5/igLqWB8Pq/gp8UHuwj7PC8XbZV7avsFoShYjaxrOhf4U7IONeKLgg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.0.5.tgz",

package.json

@@ -15,15 +15,21 @@
     "preset": "jest-expo"
   },
   "dependencies": {
+    "@expo/metro-runtime": "~4.0.1",
     "@expo/vector-icons": "^14.0.2",
+    "@react-native-async-storage/async-storage": "~2.1.1",
+    "@react-native-community/slider": "^4.5.6",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
+    "axios": "~1.8.4",
     "expo": "~52.0.25",
     "expo-blur": "~14.0.2",
     "expo-constants": "~17.0.4",
     "expo-font": "~13.0.3",
     "expo-haptics": "~14.0.1",
+    "expo-image-picker": "~16.0.6",
     "expo-linking": "~7.0.4",
+    "expo-location": "^18.0.10",
     "expo-router": "~4.0.16",
     "expo-splash-screen": "~0.29.20",
     "expo-status-bar": "~2.0.1",
@@ -35,19 +41,15 @@
     "react-native": "0.77.1",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-logs": "~5.3.0",
+    "react-native-paper": "~5.13.1",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
+    "react-native-vector-icons": "~10.2.0",
     "react-native-web": "~0.19.13",
     "react-native-webview": "13.12.5",
     "react-use-websocket": "~4.13.0",
-    "@react-native-async-storage/async-storage": "~2.1.1",
+    "uuid": "~11.0.5"
-    "expo-image-picker": "~16.0.6",
-    "axios": "~1.8.4",
-    "uuid": "~11.0.5",
-    "react-native-paper": "~5.13.1",
-    "react-native-vector-icons": "~10.2.0",
-    "@expo/metro-runtime": "~4.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",