diff --git a/mobile-app/app.json b/mobile-app/app.json index 9777ed6..3904ba1 100644 --- a/mobile-app/app.json +++ b/mobile-app/app.json @@ -33,6 +33,12 @@ "resizeMode": "contain", "backgroundColor": "#ffffff" } + ], + [ + "expo-location", + { + "locationAlwaysAndWhenInUsePermission": "このアプリは位置情報を使用します。" + } ] ], "experiments": { diff --git a/mobile-app/app/(tabs)/maps.native.tsx b/mobile-app/app/(tabs)/maps.native.tsx index 6dc232d..4ded4f3 100644 --- a/mobile-app/app/(tabs)/maps.native.tsx +++ b/mobile-app/app/(tabs)/maps.native.tsx @@ -1,7 +1,8 @@ -import React from "react"; -import { View, StyleSheet, Dimensions } from "react-native"; +import React, { useEffect, useMemo, useRef } from "react"; +import { View, StyleSheet, Dimensions, ActivityIndicator } from "react-native"; // @ts-ignore - react-native-maps has TypeScript compatibility issues with strict mode import MapView, { UrlTile, Marker, Polyline } from "react-native-maps"; +import { useCurrentLocation } from "@/hooks/use-location"; // Sample coordinates for the route const tokyoTower = { @@ -26,18 +27,58 @@ const tokyoSkytree = { longitude: 139.8107, }; -// Route coordinates for the polyline -const routeCoordinates = [ - tokyoTower, - convenienceStore1, - convenienceStore2, - tokyoSkytree, -]; - export default function MapsScreen() { + // Use TanStack Query hook for fetching current location + const { data: currentLocation, isLoading } = useCurrentLocation(); + const mapRef = useRef(null); + + // Determine initial region - use current location if available, otherwise default to Tokyo Tower + const initialRegion = currentLocation + ? { + latitude: currentLocation.latitude, + longitude: currentLocation.longitude, + latitudeDelta: 0.05, + longitudeDelta: 0.05, + } + : tokyoTower; + + const routeCoordinates = useMemo(() => { + if (currentLocation) { + return [ + { + latitude: currentLocation.latitude, + longitude: currentLocation.longitude, + }, + tokyoTower, + convenienceStore1, + convenienceStore2, + tokyoSkytree, + ]; + } + return [tokyoTower, convenienceStore1, convenienceStore2, tokyoSkytree]; + }, [currentLocation]); + + useEffect(() => { + if (currentLocation && mapRef.current) { + mapRef.current.animateToRegion( + { + latitude: currentLocation.latitude, + longitude: currentLocation.longitude, + latitudeDelta: 0.05, + longitudeDelta: 0.05, + }, + 1000, + ); // 1秒でアニメーション + } + }, [currentLocation]); + + if (isLoading) { + return ; + } + return ( - + {/* OpenStreetMap tile layer */} + {/* Current location marker - only show if location is available */} + {currentLocation && ( + + )} + {/* Markers for each location */} => { + // Request location permissions + const { status } = await Location.requestForegroundPermissionsAsync(); + + if (status !== "granted") { + throw new Error("Location permission not granted"); + } + + // Get current location + const location = await Location.getCurrentPositionAsync({ + accuracy: Location.Accuracy.High, + }); + + return { + latitude: location.coords.latitude, + longitude: location.coords.longitude, + accuracy: location.coords.accuracy, + }; + }, + retry: false, // Don't retry permission requests + staleTime: 1000 * 60 * 5, // Consider data fresh for 5 minutes + gcTime: 1000 * 60 * 10, // Keep in cache for 10 minutes + }); +} diff --git a/mobile-app/package-lock.json b/mobile-app/package-lock.json index e36589a..4ef51ca 100644 --- a/mobile-app/package-lock.json +++ b/mobile-app/package-lock.json @@ -28,6 +28,7 @@ "expo-haptics": "~14.1.4", "expo-image": "~2.3.2", "expo-linking": "~7.1.7", + "expo-location": "^18.1.6", "expo-router": "~5.1.3", "expo-splash-screen": "~0.30.10", "expo-status-bar": "~2.2.3", @@ -8129,6 +8130,15 @@ "react-native": "*" } }, + "node_modules/expo-location": { + "version": "18.1.6", + "resolved": "https://registry.npmjs.org/expo-location/-/expo-location-18.1.6.tgz", + "integrity": "sha512-l5dQQ2FYkrBgNzaZN1BvSmdhhcztFOUucu2kEfDBMV4wSIuTIt/CKsho+F3RnAiWgvui1wb1WTTf80E8zq48hA==", + "license": "MIT", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-modules-autolinking": { "version": "2.1.14", "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.1.14.tgz", diff --git a/mobile-app/package.json b/mobile-app/package.json index 24c89cc..4f06c42 100644 --- a/mobile-app/package.json +++ b/mobile-app/package.json @@ -43,6 +43,7 @@ "expo-haptics": "~14.1.4", "expo-image": "~2.3.2", "expo-linking": "~7.1.7", + "expo-location": "^18.1.6", "expo-router": "~5.1.3", "expo-splash-screen": "~0.30.10", "expo-status-bar": "~2.2.3",