added select park ability

app/index.tsx

@@ -95,7 +95,6 @@ const Index = () => {
             />
             <LocationScreen
                 visible={isLocationActive}
-                setTheme={setTheme}
                 currentTheme={currentTheme}
                 setChanged={setUserDataChanged}
                 onClose={() => setLocationActive(false)}

components/Location.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import {Dialog, TextInput, useTheme, Button, Text, List, Portal} from "react-native-paper";
+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";
@@ -9,7 +9,6 @@ import log from "@/util/log";
 interface LocationScreenProps {
     visible: boolean;
     setChanged: (dataChanged: boolean) => void;
-    setTheme: (theme: string) => void;
     currentTheme: string;
     onClose: () => void;
 }
@@ -29,7 +28,7 @@ type Park = {
     };
 };
 
-const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, currentTheme, setChanged, onClose }) => {
+const LocationScreen: React.FC<LocationScreenProps> = ({ visible, currentTheme, setChanged, onClose }) => {
     const theme = useTheme();
     const [zip, setZip] = useState("");
     const [distance, setDistance] = useState(25);
@@ -37,6 +36,7 @@ const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, curr
     const [locLoading, setLocLoading] = useState(false);
     const [parks, setParks] = useState<Park[]>([]);
     const [hasSearched, setHasSearched] = useState(false);
+    const [selectedParkId, setSelectedParkId] = useState<string | null>(null);
 
     // Call the parks endpoint with coordinates
     const fetchNearbyParks = async (longitude: number, latitude: number) => {
@@ -104,21 +104,64 @@ const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, curr
             }}
             titleStyle={{ fontWeight: "bold" }}
             descriptionNumberOfLines={2}
+            onPress={() => setSelectedParkId(item.Id)}
         />
     );
 
+    // Find the selected park, if one is selected
+    const selectedPark = selectedParkId
+        ? parks.find(p => p.Id === selectedParkId)
+        : null;
+
     return (
         <Portal>
-            <Dialog visible={visible}
+            <Dialog
-                    onDismiss={() => {
+                visible={visible}
-                        onClose();
+                onDismiss={onClose}
-                    }}
+                style={{ backgroundColor: theme.colors.background }}
-                    style={{ backgroundColor: theme.colors.background }}>
+            >
-                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Location</Dialog.Title>
+                <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%" }}>
-                        <Button mode="outlined" onPress={handleGetLocation} loading={locLoading} disabled={locLoading}
+                        {/* If a park is selected, show only that park info and change button */}
-                            style={{ marginBottom: 12, width: BUTTON_WIDTH }}>Use My Location</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={() => setSelectedParkId(null)}
+                                    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",
@@ -126,8 +169,7 @@ const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, curr
                                     width: BUTTON_WIDTH,
                                     justifyContent: "center",
                                     marginBottom: 4,
-                            }}
+                                }}>
-                        >
                                     <TextInput
                                         label="Enter Zip Code"
                                         mode="outlined"
@@ -180,15 +222,15 @@ const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, curr
                                         <Text style={{
                                             fontWeight: "bold",
                                             fontSize: 18,
-                                    marginBottom: parks != null ? 8 : 2,
+                                            marginBottom: parks.length > 0 ? 8 : 2,
                                             color: theme.colors.primary
                                         }}>
                                             Nearby Dogparks
                                         </Text>
-                                {parks != null ? (
+                                        {parks.length > 0 ? (
                                             <FlatList
                                                 data={parks}
-                                        keyExtractor={(_, idx) => String(idx)}
+                                                keyExtractor={(item) => item.Id}
                                                 renderItem={renderItem}
                                                 showsVerticalScrollIndicator={false}
                                                 style={{ maxHeight: 170 }}
@@ -200,6 +242,8 @@ const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, curr
                                         )}
                                     </View>
                                 )}
+                            </>
+                        )}
                     </View>
                 </Dialog.Content>
             </Dialog>