Add current location display to maps using expo-location and TanStack Query

mobile-app/app.json

@@ -33,6 +33,12 @@
           "resizeMode": "contain",
           "backgroundColor": "#ffffff"
         }
+      ],
+      [
+        "expo-location",
+        {
+          "locationAlwaysAndWhenInUsePermission": "このアプリは位置情報を使用します。"
+        }
       ]
     ],
     "experiments": {

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,25 +27,78 @@ 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<MapView>(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 <ActivityIndicator />;
+  }
+
   return (
     <View style={styles.container}>
-      <MapView style={styles.map} initialRegion={tokyoTower}>
+      <MapView ref={mapRef} style={styles.map} initialRegion={initialRegion}>
         {/* OpenStreetMap tile layer */}
         <UrlTile
           urlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
           maximumZ={19}
           minimumZ={1}
         />
 
+        {/* Current location marker - only show if location is available */}
+        {currentLocation && (
+          <Marker
+            coordinate={{
+              latitude: currentLocation.latitude,
+              longitude: currentLocation.longitude,
+            }}
+            title="現在地"
+            description="Your current location"
+            pinColor="orange"
+          />
+        )}
+
         {/* Markers for each location */}
         <Marker
           coordinate={tokyoTower}

mobile-app/hooks/use-location.ts

@@ -0,0 +1,45 @@
+import { useQuery } from "@tanstack/react-query";
+import * as Location from "expo-location";
+
+export interface LocationData {
+  latitude: number;
+  longitude: number;
+  accuracy?: number | null;
+}
+
+export interface LocationError {
+  code: string;
+  message: string;
+}
+
+/**
+ * Custom hook to get current location using TanStack Query
+ * Handles permissions and provides error states
+ */
+export function useCurrentLocation() {
+  return useQuery({
+    queryKey: ["currentLocation"],
+    queryFn: async (): Promise<LocationData> => {
+      // 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
+  });
+}

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