Géolocalisation en arrière-plan

client/app/(tabs)/_layout.tsx

@@ -6,7 +6,7 @@ import { useColorScheme } from '@/hooks/useColorScheme'
 import { FontAwesome6, MaterialIcons } from '@expo/vector-icons'
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
+  const colorScheme = useColorScheme()
 
   return (
     <Tabs
@@ -46,5 +46,5 @@ export default function TabLayout() {
         }}
       />
     </Tabs>
-  );
+  )
 }

client/app/(tabs)/index.tsx

@@ -11,19 +11,7 @@ export default function MapScreen() {
   const [location, setLocation] = useState<Location.LocationObject | null>(null)
   const [locationAccessGranted, setLocationAccessGranted] = useState(false)
 
-  useEffect(() => {
-    async function watchPosition() { 
-      let { status } = await Location.requestForegroundPermissionsAsync()
-      if (status !== 'granted') {
-        setLocationAccessGranted(false)
-        alert("Vous devez activer votre géolocalisation pour utiliser l'application.")
-        return
-      }
-      setLocationAccessGranted(true)
-      await Location.watchPositionAsync({accuracy: Location.Accuracy.BestForNavigation}, location => setLocation(location))
-    }
-    watchPosition()
-  }, [])
+  
 
   return (
     <ThemedView style={styles.page}>

client/app/_layout.tsx

@@ -1,10 +1,69 @@
+import { Dispatch, useEffect, useState } from 'react'
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
 import { Stack } from "expo-router"
 import { useColorScheme } from '@/hooks/useColorScheme'
 import { StatusBar } from 'expo-status-bar'
+import * as Location from 'expo-location'
+import * as TaskManager from 'expo-task-manager'
+import { Platform } from 'react-native'
+
+TaskManager.defineTask("fetch-geolocation", async ({ data, error }: any) => {
+  if (error) {
+    console.error(error)
+    return
+  }
+  const { locations } = data
+  for (let location of locations) {
+    console.log(location)
+  }
+ })
+
+async function manageGelocation(setLocation: Dispatch<Location.LocationObject | null>) {
+  await Location.enableNetworkProviderAsync().catch(error => alert(error))
+  const { status: foregroundStatus } = await Location.requestForegroundPermissionsAsync()
+  if (foregroundStatus === 'granted') {
+    setLocation(await Location.getLastKnownPositionAsync())
+    const { status: backgroundStatus } = await Location.requestBackgroundPermissionsAsync()
+    if (backgroundStatus === 'granted') {
+      if (Platform.OS !== "web") {
+        if (!await Location.hasStartedLocationUpdatesAsync("fetch-geolocation")) {
+          await Location.startLocationUpdatesAsync("fetch-geolocation", {
+            accuracy: Location.Accuracy.BestForNavigation,
+            activityType: Location.ActivityType.OtherNavigation,
+            deferredUpdatesInterval: 100,
+            foregroundService: {
+              killServiceOnDestroy: false,
+              notificationBody: "Géolocalisation activée pour « Traintrape-moi »",
+              notificationTitle: "Traintrape-moi",
+              notificationColor: "#FFFF00",
+            }
+          })
+        }
+      }
+      else {
+        await Location.watchPositionAsync({accuracy: Location.Accuracy.BestForNavigation}, location_nouveau => setLocation(location_nouveau))
+      }
+    }
+    else {
+      alert("Vous devez activer votre géolocalisation en arrière-plan pour utiliser l'application.")
+    }
+  }
+  else {
+    alert("Vous devez activer votre géolocalisation pour utiliser l'application.")
+  }
+}
 
 export default function RootLayout() {
+  const [location, setLocation] = useState<Location.LocationObject | null>(null)
+  useEffect(() => {
+    manageGelocation(setLocation)
+    return () => {
+      Location.stopLocationUpdatesAsync("fetch-geolocation")
+    }
+  }, [])
+
   const colorScheme = useColorScheme()
+
   return <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
     <Stack>
       <Stack.Screen name="(tabs)" options={{ headerShown: false }} />