Added distance slider

components/Location.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Dialog, TextInput, useTheme, Button, Text } from "react-native-paper";
 import { View } 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"
@@ -11,14 +12,14 @@ const BUTTON_WIDTH = 260;
 const LocationComponent = () => {
     const theme = useTheme();
     const [zip, setZip] = useState("");
+    const [distance, setDistance] = useState(25); // <-- slider value
     const [loading, setLoading] = useState(false);
     const [locLoading, setLocLoading] = useState(false);
 
     // Call the parks endpoint with coordinates
     const fetchNearbyParks = async (longitude: number, latitude: number) => {
         try {
-            const range = 25;
+            const response = await axios.post(API_URL + "/parkLookup", { "Lon": longitude, "Lat": latitude, "Dist": distance });
-            const response = await axios.post(API_URL + "/parkLookup", { "Lon": longitude, "Lat": latitude, "Dist": range });
             log.error("Nearby Parks:", response.data); // handle parks as you need
         } catch (err) {
             log.error("Nearby Parks Error:", err);
@@ -62,7 +63,7 @@ const LocationComponent = () => {
     };
 
     return (
-        <Dialog.Content style={{ maxHeight: 360, justifyContent: "center", alignItems: "center" }}>
+        <Dialog.Content style={{ maxHeight: 400, justifyContent: "center", alignItems: "center" }}>
             <View style={{ alignItems: "center", width: "100%" }}>
                 <Button
                     mode="outlined"
@@ -80,6 +81,7 @@ const LocationComponent = () => {
                         alignItems: "center",
                         width: BUTTON_WIDTH,
                         justifyContent: "center",
+                        marginBottom: 4,
                     }}
                 >
                     <TextInput
@@ -112,6 +114,23 @@ const LocationComponent = () => {
                         Submit
                     </Button>
                 </View>
+                {/* Distance Slider */}
+                <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>
             </View>
         </Dialog.Content>
     );

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