Suivi caméra sur Android

client/components/Map.tsx

@@ -1,24 +1,39 @@
 import { StyleSheet } from 'react-native'
 import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation } from '@maplibre/maplibre-react-native'
-import { FontAwesome5 } from '@expo/vector-icons'
+import { FontAwesome5, MaterialIcons } from '@expo/vector-icons'
 import { circle } from '@turf/circle'
 import { useLastOwnLocation, useLastPlayerLocations } from '@/hooks/useLocation'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { PlayerLocation } from '@/utils/features/location/locationSlice'
 import { useGame } from '@/hooks/useGame'
+import { FAB } from 'react-native-paper'
 
 export default function Map() {
-  const userLocation = useLastOwnLocation()
+  const [followUser, setFollowUser] = useState(true)
+  return (
+    <>
+      <MapComponent followUser={followUser} />
+      <FAB
+          style={{ position: 'absolute', right: 25, bottom: 25 }}
+          icon={(props) => <MaterialIcons name={followUser ? 'my-location' : 'location-searching'} {...props} />}
+          onPress={() => setFollowUser(followUser => !followUser)} />
+    </>
+  )
+}
+
+function MapComponent({ followUser }: { followUser?: boolean }) {
   MapLibreGL.setAccessToken(null)
+  const userLocation = useLastOwnLocation()
   return (
     <MapView
       logoEnabled={false}
       compassViewPosition={2}
       style={styles.map}
       styleURL="https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json">
-      {/* FIXME Il faudra pouvoir avoir un bouton de suivi pour activer le suivi de la caméro */}
       {userLocation && <Camera
-          defaultSettings={{centerCoordinate: [userLocation?.coords.longitude, userLocation?.coords.latitude], zoomLevel: 15}} />}
+          defaultSettings={{centerCoordinate: [userLocation?.coords.longitude, userLocation?.coords.latitude], zoomLevel: 15}}
+          followUserLocation={followUser}
+          followZoomLevel={followUser ? 13 : undefined} />}
       
       <RasterSource id="railwaymap-source" tileUrlTemplates={["https://a.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png"]}></RasterSource>
       <RasterLayer id="railwaymap-layer" sourceID="railwaymap-source" style={{rasterOpacity: 0.7}} />