Feat/tracking impl

android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,12 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_LOCATION" />
+
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 
     <!-- Required for react-native-zeroconf -->
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

app.json

@@ -1,4 +1,14 @@
 {
   "name": "CoMapeo",
-  "plugins": ["expo-localization", "expo-secure-store"]
+  "plugins": [
+    "expo-localization",
+    "expo-secure-store",
+    [
+      "expo-location",
+      {
+        "isIosBackgroundLocationEnabled": true,
+        "isAndroidBackgroundLocationEnabled": true
+      }
+    ]
+  ]
 }

messages/en.json

@@ -19,6 +19,27 @@
     "description": "Title of dialog that shows when cancelling a new observation",
     "message": "Discard observation?"
   },
+  "Modal.GPSDisable.button": {
+    "message": "Enable"
+  },
+  "Modal.GPSDisable.description": {
+    "message": "To create a Track CoMapeo needs access to your location and GPS."
+  },
+  "Modal.GPSDisable.title": {
+    "message": "GPS Disabled"
+  },
+  "Modal.GPSEnable.button.default": {
+    "message": "Start Tracks"
+  },
+  "Modal.GPSEnable.button.loading": {
+    "message": "Loading…"
+  },
+  "Modal.GPSEnable.button.stop": {
+    "message": "Stop Tracks"
+  },
+  "Modal.GPSEnable.trackingDescription": {
+    "message": "You’ve been recording for"
+  },
   "Screens.Settings.AppSettings.coordinateSystem": {
     "message": "Coordinate System"
   },

package.json

@@ -38,6 +38,7 @@
     "@react-navigation/native-stack": "^6.9.13",
     "@rnmapbox/maps": "^10.1.16",
     "@tanstack/react-query": "^5.12.2",
+    "@types/luxon": "^3.4.2",
     "assert": "^2.0.0",
     "buffer": "^6.0.3",
     "cheap-ruler": "^3.0.2",
@@ -46,10 +47,13 @@
     "expo-camera": "~14.0.5",
     "expo-crypto": "~12.8.1",
     "expo-localization": "~14.8.3",
-    "expo-location": "~16.5.4",
+    "expo-location": "~16.5.5",
     "expo-secure-store": "~12.8.1",
     "expo-sensors": "~12.9.1",
+    "expo-task-manager": "~11.7.2",
+    "geojson": "^0.5.0",
     "lodash.isequal": "^4.5.0",
+    "luxon": "^3.4.4",
     "nanoid": "^5.0.1",
     "nodejs-mobile-react-native": "^18.17.7",
     "react": "18.2.0",

src/frontend/Navigation/ScreenGroups/AppScreens.tsx

@@ -1,9 +1,6 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {NavigatorScreenParams} from '@react-navigation/native';
 import * as React from 'react';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import {useForegroundPermissions} from 'expo-location';
-
 import {HomeHeader} from '../../sharedComponents/HomeHeader';
 import {RootStack} from '../AppStack';
 import {MessageDescriptor} from 'react-intl';
@@ -50,13 +47,18 @@ import {
   GpsModal,
   createNavigationOptions as createGpsModalNavigationOptions,
 } from '../../screens/GpsModal';
-import {useLocation} from '../../hooks/useLocation';
-import {useLocationProviderStatus} from '../../hooks/useLocationProviderStatus';
-import {getLocationStatus} from '../../lib/utils';
+import {useCurrentTab} from '../../hooks/useCurrentTab';
+import {TrackingTabBarIcon} from './TabBar/TrackingTabBarIcon';
+import {TabName} from '../types';
+import {CameraTabBarIcon} from './TabBar/CameraTabBarIcon';
+import {MapTabBarIcon} from './TabBar/MapTabBarIcon';
+
+export const TAB_BAR_HEIGHT = 70;
 
 export type HomeTabsList = {
   Map: undefined;
   Camera: undefined;
+  Tracking: undefined;
 };
 
 export type AppList = {
@@ -135,42 +137,48 @@ export type AppList = {
 const Tab = createBottomTabNavigator<HomeTabsList>();
 
 const HomeTabs = () => {
-  const locationState = useLocation({maxDistanceInterval: 0});
-  const [permissions] = useForegroundPermissions();
-  const locationProviderStatus = useLocationProviderStatus();
-
-  const precision = locationState.location?.coords.accuracy;
-
-  const locationStatus =
-    !!locationState.error || !permissions?.granted
-      ? 'error'
-      : getLocationStatus({
-          location: locationState.location,
-          providerStatus: locationProviderStatus,
-        });
+  const {handleTabPress} = useCurrentTab();
 
   return (
     <Tab.Navigator
+      screenListeners={{tabPress: handleTabPress}}
       screenOptions={({route}) => ({
-        tabBarIcon: ({color}) => {
-          const iconName = route.name === 'Map' ? 'map' : 'photo-camera';
-          return <MaterialIcons name={iconName} size={30} color={color} />;
-        },
-        header: () => (
-          <HomeHeader
-            locationStatus={locationStatus}
-            precision={
-              typeof precision === 'number' ? Math.round(precision) : undefined
-            }
-          />
-        ),
+        tabBarStyle: {height: TAB_BAR_HEIGHT},
+        tabBarShowLabel: false,
         headerTransparent: true,
         tabBarTestID: 'tabBarButton' + route.name,
+        header: HomeHeader,
       })}
-      initialRouteName="Map"
+      initialRouteName={TabName.Map}
       backBehavior="initialRoute">
-      <Tab.Screen name="Map" component={MapScreen} />
-      <Tab.Screen name="Camera" component={CameraScreen} />
+      <Tab.Screen
+        name={TabName.Map}
+        component={MapScreen}
+        options={{
+          tabBarIcon: MapTabBarIcon,
+        }}
+      />
+      <Tab.Screen
+        name={TabName.Camera}
+        component={CameraScreen}
+        options={{
+          tabBarIcon: CameraTabBarIcon,
+        }}
+      />
+      <Tab.Screen
+        name={TabName.Tracking}
+        options={{
+          tabBarIcon: TrackingTabBarIcon,
+          headerShown: false,
+        }}
+        listeners={({navigation}) => ({
+          tabPress: e => {
+            e.preventDefault();
+            navigation.navigate(TabName.Map);
+          },
+        })}
+        children={() => <></>}
+      />
     </Tab.Navigator>
   );
 };
@@ -197,9 +205,9 @@ export const createDefaultScreenGroup = (
       options={props => {
         const observationId = props.route.params?.observationId;
         return {
-          headerLeft: props => (
+          headerLeft: params => (
             <CustomHeaderLeftClose
-              headerBackButtonProps={props}
+              headerBackButtonProps={params}
               observationId={observationId}
             />
           ),

src/frontend/Navigation/ScreenGroups/TabBar/CameraTabBarIcon.tsx

@@ -0,0 +1,16 @@
+import React, {FC} from 'react';
+import {TabBarIconProps, TabName} from '../../types';
+import {TabBarIcon} from './TabBarIcon';
+import {useNavigationStore} from '../../../hooks/useNavigationStore';
+
+export const CameraTabBarIcon: FC<TabBarIconProps> = props => {
+  const {currentTab} = useNavigationStore();
+
+  return (
+    <TabBarIcon
+      {...props}
+      isFocused={props.focused && currentTab !== TabName.Tracking}
+      iconName="photo-camera"
+    />
+  );
+};

src/frontend/Navigation/ScreenGroups/TabBar/MapTabBarIcon.tsx

@@ -0,0 +1,16 @@
+import React, {FC} from 'react';
+import {TabBarIconProps, TabName} from '../../types';
+import {TabBarIcon} from './TabBarIcon';
+import {useNavigationStore} from '../../../hooks/useNavigationStore';
+
+export const MapTabBarIcon: FC<TabBarIconProps> = props => {
+  const {currentTab} = useNavigationStore();
+
+  return (
+    <TabBarIcon
+      {...props}
+      isFocused={props.focused && currentTab !== TabName.Tracking}
+      iconName="map"
+    />
+  );
+};

src/frontend/Navigation/ScreenGroups/TabBar/TabBarIcon.tsx

@@ -0,0 +1,19 @@
+import React, {FC} from 'react';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import {TabBarIconProps} from '../../types';
+import {COMAPEO_BLUE, MEDIUM_GREY} from '../../../lib/styles';
+
+export interface TabBarIcon extends TabBarIconProps {
+  isFocused: boolean;
+  iconName: string;
+}
+
+export const TabBarIcon: FC<TabBarIcon> = ({size, iconName, isFocused}) => {
+  return (
+    <MaterialIcons
+      name={iconName}
+      size={size}
+      color={isFocused ? COMAPEO_BLUE : MEDIUM_GREY}
+    />
+  );
+};