diff --git a/components/Location.tsx b/components/Location.tsx index 6907137..2b92419 100644 --- a/components/Location.tsx +++ b/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": range }); + const response = await axios.post(API_URL + "/parkLookup", { "Lon": longitude, "Lat": latitude, "Dist": distance }); 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 ( - + + {/* Distance Slider */} + + + Distance: {distance} mile{distance !== 1 ? "s" : ""} + + + ); }; -export default LocationComponent; \ No newline at end of file +export default LocationComponent; diff --git a/package-lock.json b/package-lock.json index 733116b..4bc3bd5 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 709a9e6..f0809c8 100644 --- a/package.json +++ b/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", - "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" + "uuid": "~11.0.5" }, "devDependencies": { "@babel/core": "^7.25.2",