restore changes with GPSPill

src/frontend/screens/MapScreen/index.tsx

@@ -21,7 +21,6 @@ import {GPSModal} from './GPSPermissions/GPSPermissionsModal';
 import {TrackPathLayer} from './track/TrackPathLayer';
 import {UserLocation} from './UserLocation';
 import {useSharedLocationContext} from '../../contexts/SharedLocationContext';
-import {useNavigation} from '@react-navigation/native';
 
 // This is the default zoom used when the map first loads, and also the zoom
 // that the map will zoom to if the user clicks the "Locate" button and the
@@ -35,7 +34,6 @@ export const MAP_STYLE = Mapbox.StyleURL.Outdoors;
 
 export const MapScreen = () => {
   const [zoom, setZoom] = React.useState(DEFAULT_ZOOM);
-  const navigation = useNavigation();
   const [isFinishedLoading, setIsFinishedLoading] = React.useState(false);
   const [following, setFollowing] = React.useState(true);
   const {newDraft} = useDraftObservation();
@@ -65,15 +63,6 @@ export const MapScreen = () => {
     setIsFinishedLoading(true);
   }
 
-  React.useEffect(() => {
-    const unsubscribe = navigation.addListener('focus', e => {
-      // Prevent default action
-      console.log(e, 'e');
-      // e.preventDefault();
-    });
-    return () => unsubscribe();
-  }, []);
-
   return (
     <View style={{flex: 1}}>
       <Mapbox.MapView

src/frontend/sharedComponents/GPSPill.tsx

@@ -1,13 +1,13 @@
 import React, {useMemo} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {Text} from './Text';
-import {useNavigationFromHomeTabs} from '../hooks/useNavigationWithTypes';
 import {useIsFocused} from '@react-navigation/native';
 import {useLocationProviderStatus} from '../hooks/useLocationProviderStatus';
 import {getLocationStatus} from '../lib/utils';
 import {defineMessages, useIntl} from 'react-intl';
 import {GpsIcon} from './icons';
 import {useSharedLocationContext} from '../contexts/SharedLocationContext';
+import {BLACK, WHITE} from '../lib/styles';
 
 const m = defineMessages({
   noGps: {
@@ -20,7 +20,7 @@ const m = defineMessages({
   },
 });
 
-export const GPSPill = () => {
+export const GPSPill = ({navigation}) => {
   const isFocused = useIsFocused();
   const {formatMessage: t} = useIntl();
   const {locationState, fgPermissions} = useSharedLocationContext();
@@ -51,27 +51,43 @@ export const GPSPill = () => {
     } else return `± ${Math.round(precision!)} m`;
   }, [precision, status, t]);
 
-  const navigation = useNavigationFromHomeTabs();
-
   return (
-    <TouchableOpacity onPress={() => navigation.navigate('GpsModal')}>
-      <View style={styles.indicatorWrapper}>
-        <View style={styles.wrapper}>
+    <TouchableOpacity
+      onPress={() => navigation.navigate('GPSModal' as never)}
+      testID="gpsPillButton">
+      <View
+        style={[
+          styles.container,
+          status === 'error' ? styles.error : undefined,
+        ]}>
+        <View style={styles.icon}>
           {isFocused && <GpsIcon variant={status} />}
-          <Text style={styles.text}>{text}</Text>
         </View>
+        <Text style={styles.text} numberOfLines={1}>
+          {text}
+        </Text>
       </View>
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
-  indicatorWrapper: {
-    backgroundColor: '#333333',
-    borderRadius: 20,
-    paddingVertical: 14,
-    paddingHorizontal: 10,
+  container: {
+    flex: 0,
+    minWidth: 100,
+    maxWidth: 200,
+    borderRadius: 18,
+    height: 36,
+    paddingLeft: 32,
+    paddingRight: 20,
+    borderWidth: 3,
+    borderColor: '#33333366',
+    backgroundColor: BLACK,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
   },
-  wrapper: {flexDirection: 'row', alignItems: 'center'},
-  text: {marginLeft: 5, color: '#fff', fontSize: 15},
+  error: {backgroundColor: '#FF0000'},
+  text: {color: WHITE},
+  icon: {position: 'absolute', left: 6},
 });

src/frontend/sharedComponents/HomeHeader.tsx

@@ -1,24 +1,27 @@
-import React from 'react';
+import React, {FC} from 'react';
 import {View, StyleSheet} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {IconButton} from './IconButton';
 import {ObservationListIcon} from './icons';
 import {GPSPill} from './GPSPill';
-import {useNavigationFromHomeTabs} from '../hooks/useNavigationWithTypes';
+import {NavigationProp} from '@react-navigation/native';
 
-export const HomeHeader = () => {
-  const navigation = useNavigationFromHomeTabs();
+interface HomeHeader {
+  navigation: NavigationProp<ReactNavigation.RootParamList>;
+}
+
+export const HomeHeader: FC<HomeHeader> = ({navigation}) => {
   return (
     <View style={[styles.header]}>
       <LinearGradient
         style={styles.linearGradient}
         colors={['#0006', '#0000']}
       />
       <View style={styles.leftButton}>{/* Placeholder for left button */}</View>
-      <GPSPill />
+      <GPSPill navigation={navigation} />
       <IconButton
         onPress={() => {
-          navigation.navigate('ObservationList');
+          navigation.navigate('ObservationList' as never);
         }}
         testID="observationListButton">
         <ObservationListIcon />