From b0c343ab2053b8ba5852864f171242b5b9ba646b Mon Sep 17 00:00:00 2001
From: Hank <hank@jointsecurityarea.org>
Date: Mon, 6 Jul 2026 10:38:39 -0700
Subject: [PATCH] Map: pin markers -> parking flow; stop native user-location
 camera tracking

- Markers are now compact colored pins (no long label bubbles); tapping one opens
  the meter/parking flow for that zone
- UserLocation renderMode "native" -> "normal": the native location component was
  tracking the camera back to the user on re-render / marker tap. Normal mode draws
  the dot in the JS layer with no camera coupling.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 app/src/screens/MapScreen.tsx | 43 ++++++++++++++---------------------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/app/src/screens/MapScreen.tsx b/app/src/screens/MapScreen.tsx
index 9b62126..be2b666 100644
--- a/app/src/screens/MapScreen.tsx
+++ b/app/src/screens/MapScreen.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
 import Constants from 'expo-constants';
 import {
   MapView,
@@ -160,9 +161,12 @@ export function MapScreen() {
             only on explicit user actions) so re-renders never move the map. */}
         <Camera ref={cameraRef} />
 
+        {/* renderMode="normal" draws the dot in the JS layer and does NOT engage
+            the native location component, which was tracking the camera back to
+            the user on re-render. */}
         <UserLocation
           visible
-          renderMode="native"
+          renderMode="normal"
           onUpdate={(loc: any) => {
             if (loc?.coords) {
               nativeFix.current = {
@@ -181,20 +185,15 @@ export function MapScreen() {
           >
             <TouchableOpacity
               onPress={() => navigation.navigate('MeterDetail', { zone: z })}
-              activeOpacity={0.8}
-              style={styles.marker}
+              activeOpacity={0.7}
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
             >
-              {/* Small dot in the zone's own color, but the label bubble is always
-                  high-contrast (some zones report a white BackgroundColor). */}
-              <View
-                style={[
-                  styles.markerDot,
-                  { backgroundColor: normalizeColor(z.BackgroundColor) ?? '#1e6f5c' },
-                ]}
+              <Ionicons
+                name="location-sharp"
+                size={34}
+                color={normalizeColor(z.BackgroundColor) ?? '#1e6f5c'}
+                style={styles.pinShadow}
               />
-              <Text style={styles.markerText} numberOfLines={1}>
-                {z.ZoneName ?? z.ScannerCode ?? 'Meter'}
-              </Text>
             </TouchableOpacity>
           </MarkerView>
         ))}
@@ -225,20 +224,12 @@ export function MapScreen() {
 const styles = StyleSheet.create({
   container: { flex: 1 },
   map: { flex: 1 },
-  marker: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 5,
-    paddingHorizontal: 9,
-    paddingVertical: 5,
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.85)',
-    backgroundColor: 'rgba(17,24,22,0.92)', // always dark so the label is readable
-    maxWidth: 150,
+  // White halo so the colored pin stays visible on both light and dark tiles.
+  pinShadow: {
+    textShadowColor: 'rgba(255,255,255,0.9)',
+    textShadowOffset: { width: 0, height: 0 },
+    textShadowRadius: 3,
   },
-  markerDot: { width: 9, height: 9, borderRadius: 5 },
-  markerText: { color: '#fff', fontSize: 12, fontWeight: '700' },
   statusBar: {
     position: 'absolute',
     top: 12,