Show recenter button when the map drifts off the user

Tracks viewport center after each region change and compares it to the
user's location. When the user has panned more than 20% of the visible
span away in either axis, surface a floating button that flies the
camera back to their location at the same zoom level we use initially.

Positioned with safe-area insets plus a fixed clearance so it sits above
the "signed in as…" bar at the bottom of App.tsx.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dfalling

src/map/MapScreen.tsx

@@ -10,7 +10,14 @@ import {
 } from '@maplibre/maplibre-react-native';
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {NativeSyntheticEvent} from 'react-native';
-import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {
   type ElementsQuery,
   type ElementsQueryVariables,
@@ -21,11 +28,19 @@ type ElementWithLocation = ElementsQuery['elements'][number];
 
 const MAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
 const USER_ZOOM = 14;
+// Show the recenter button once the viewport center drifts more than this
+// fraction of the visible span away from the user in either axis.
+const OFF_CENTER_THRESHOLD = 0.2;
+// Vertical clearance above the device safe area so the recenter button sits
+// above the app's bottom "signed in as…" bar in App.tsx. Keep in sync if that
+// bar's height changes.
+const BOTTOM_BAR_CLEARANCE = 64;
 
 export function MapScreen() {
   const cameraRef = useRef<CameraRef>(null);
   const hasCenteredRef = useRef(false);
   const [permissionGranted, setPermissionGranted] = useState(false);
+  const safeAreaInsets = useSafeAreaInsets();
 
   useEffect(() => {
     let cancelled = false;
@@ -41,18 +56,27 @@ export function MapScreen() {
   }, []);
 
   const position = useCurrentPosition({enabled: permissionGranted});
+  const positionRef = useRef(position);
+  positionRef.current = position;
 
-  useEffect(() => {
-    if (hasCenteredRef.current || !position) return;
-    hasCenteredRef.current = true;
+  const flyToUser = useCallback(() => {
+    const pos = positionRef.current;
+    if (!pos) return;
     cameraRef.current?.flyTo({
-      center: [position.coords.longitude, position.coords.latitude],
+      center: [pos.coords.longitude, pos.coords.latitude],
       zoom: USER_ZOOM,
       duration: 1500,
     });
-  }, [position]);
+  }, []);
+
+  useEffect(() => {
+    if (hasCenteredRef.current || !position) return;
+    hasCenteredRef.current = true;
+    flyToUser();
+  }, [position, flyToUser]);
 
   const [bounds, setBounds] = useState<ElementsQueryVariables['bounds']>();
+  const [isCenteredOnUser, setIsCenteredOnUser] = useState(true);
 
   const onRegionDidChange = useCallback(
     (event: NativeSyntheticEvent<ViewStateChangeEvent>) => {
@@ -61,6 +85,17 @@ export function MapScreen() {
       if (!hasCenteredRef.current) return;
       const [west, south, east, north] = event.nativeEvent.bounds;
       setBounds({left: west, bottom: south, right: east, top: north});
+
+      const pos = positionRef.current;
+      if (!pos) return;
+      const [centerLng, centerLat] = event.nativeEvent.center;
+      const spanLng = east - west;
+      const spanLat = north - south;
+      const offLng = Math.abs(centerLng - pos.coords.longitude) / spanLng;
+      const offLat = Math.abs(centerLat - pos.coords.latitude) / spanLat;
+      setIsCenteredOnUser(
+        offLng <= OFF_CENTER_THRESHOLD && offLat <= OFF_CENTER_THRESHOLD,
+      );
     },
     [],
   );
@@ -124,6 +159,18 @@ export function MapScreen() {
           <ActivityIndicator size="large" color="#1d6fe0" />
         </View>
       ) : null}
+      {position && !isCenteredOnUser ? (
+        <TouchableOpacity
+          accessibilityLabel="Recenter map on your location"
+          accessibilityRole="button"
+          onPress={flyToUser}
+          style={[
+            styles.recenterButton,
+            {bottom: safeAreaInsets.bottom + BOTTOM_BAR_CLEARANCE},
+          ]}>
+          <Text style={styles.recenterIcon}>◎</Text>
+        </TouchableOpacity>
+      ) : null}
     </View>
   );
 }
@@ -160,4 +207,24 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: 'rgba(255,255,255,0.6)',
   },
+  recenterButton: {
+    position: 'absolute',
+    right: 16,
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: '#ffffff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    shadowOffset: {width: 0, height: 2},
+    elevation: 4,
+  },
+  recenterIcon: {
+    fontSize: 24,
+    lineHeight: 28,
+    color: '#1d6fe0',
+  },
 });