Affichage de l'adresse estimée dans les infos de la position d'une joueuse

client/components/Map.tsx

@@ -2,7 +2,8 @@ import { FontAwesome5, MaterialIcons } from '@expo/vector-icons'
 import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation, UserTrackingMode } from '@maplibre/maplibre-react-native'
 import { useQuery } from '@tanstack/react-query'
 import { circle } from '@turf/circle'
-import React, { useMemo, useState } from 'react'
+import { reverseGeocodeAsync } from 'expo-location'
+import React, { useEffect, useMemo, useState } from 'react'
 import { StyleSheet } from 'react-native'
 import { Button, Dialog, FAB, Portal, Text } from 'react-native-paper'
 import { useAuth } from '@/hooks/useAuth'
@@ -136,9 +137,11 @@ function PlayerLocationDialog({ displayedPlayerId, onDismiss }: { displayedPlaye
       enabled: isAuthValid(auth),
       initialData: { data: [], meta: { currentPage: 0, lastPage: 0, nextPage: 0, prevPage: 0, total: 0, totalPerPage: 0 } },
     })
+
   const displayedPlayerLoc = useMemo(() => {
     return lastPlayerLocations.find(loc => loc.playerId === displayedPlayerId)
   }, [displayedPlayerId, lastPlayerLocations])
+
   const displayedPlayerName = useMemo(() => {
     if (!playersQuery.isSuccess || !displayedPlayerId)
       return "Chargement…"
@@ -148,6 +151,13 @@ function PlayerLocationDialog({ displayedPlayerId, onDismiss }: { displayedPlaye
     return player.name
   }, [displayedPlayerId, playersQuery])
 
+  const [address, setAddress] = useState("Adresse inconnue")
+  useEffect(() => {
+    if (!displayedPlayerLoc)
+      return setAddress("Adresse inconnue")
+    reverseGeocodeAsync(displayedPlayerLoc).then(addresses => setAddress(addresses[0].formattedAddress ?? "Adresse inconnue"))
+  }, [displayedPlayerLoc])
+
   return (
     <Dialog visible={displayedPlayerId !== null} onDismiss={onDismiss}>
       <Dialog.Title>{displayedPlayerName}</Dialog.Title>
@@ -158,6 +168,9 @@ function PlayerLocationDialog({ displayedPlayerId, onDismiss }: { displayedPlaye
         <Text>
           Précision : {displayedPlayerLoc?.accuracy.toPrecision(3)} m
         </Text>
+        <Text>
+          Adresse estimée : {address}
+        </Text>
       </Dialog.Content>
       <Dialog.Actions>
         <Button onPress={onDismiss}>