From a6f7dc38e976c77f6342d2d685e02f9a37567e1a Mon Sep 17 00:00:00 2001
From: Thomas Henry Thirlwall <ththirlwall99@gmail.com>
Date: Tue, 28 Apr 2026 07:16:46 -0500
Subject: [PATCH] Changed the pin behavior on mobile to be more like the web
 version

---
 src/app/index.tsx                 |  8 +++-
 src/components/app-map.native.tsx | 62 ++++++++++++++++++++-----------
 2 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/src/app/index.tsx b/src/app/index.tsx
index 9dbbade..b9dc906 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -342,17 +342,21 @@ export default function HomeScreen() {
 
   function handlePinPress(pinId: string) {
     if (pinId === "user-location") {
+      setSelectedVenueId(null);
       return;
     }
 
-    setSelectedVenueId(pinId);
-
     const tappedResult = results.find((result) => result.venue.id === pinId);
 
     if (!tappedResult) {
       return;
     }
 
+    if (selectedVenueId !== pinId) {
+      setSelectedVenueId(pinId);
+      return;
+    }
+
     void openDirections({
       address: `${tappedResult.venue.address}, ${tappedResult.venue.city}, ${tappedResult.venue.region}`,
       destination: {
diff --git a/src/components/app-map.native.tsx b/src/components/app-map.native.tsx
index d49bb0e..04970e7 100644
--- a/src/components/app-map.native.tsx
+++ b/src/components/app-map.native.tsx
@@ -136,30 +136,41 @@ export function AppMap({
           />
         </RasterSource>
 
-        {pins.map((pin) => (
-          <Marker
-            key={pin.id}
-            anchor="bottom"
-            lngLat={[pin.coordinate.longitude, pin.coordinate.latitude]}
-            onPress={() => onPinPress?.(pin.id)}
-          >
-            <View style={styles.markerWrap}>
-              <View
-                style={[
-                  styles.dot,
-                  pin.isUserLocation ? styles.userDot : styles.venueDot,
-                  selectedPinId === pin.id && styles.dotSelected,
-                ]}
-              />
-              <View style={styles.label}>
-                <Text style={styles.labelTitle}>{pin.title}</Text>
-                {pin.description ? (
-                  <Text style={styles.labelText}>{pin.description}</Text>
+        {pins.map((pin) => {
+          const isSelected = selectedPinId === pin.id;
+
+          return (
+            <Marker
+              key={pin.id}
+              anchor="bottom"
+              lngLat={[pin.coordinate.longitude, pin.coordinate.latitude]}
+              onPress={() => onPinPress?.(pin.id)}
+            >
+              <View style={styles.markerWrap}>
+                <View
+                  style={[
+                    styles.dot,
+                    pin.isUserLocation ? styles.userDot : styles.venueDot,
+                    isSelected && styles.dotSelected,
+                  ]}
+                />
+                {isSelected ? (
+                  <View style={styles.label}>
+                    <Text style={styles.labelTitle}>{pin.title}</Text>
+                    {pin.description ? (
+                      <Text style={styles.labelText}>{pin.description}</Text>
+                    ) : null}
+                    {!pin.isUserLocation ? (
+                      <Text style={styles.labelAction}>
+                        Tap again for directions
+                      </Text>
+                    ) : null}
+                  </View>
                 ) : null}
               </View>
-            </View>
-          </Marker>
-        ))}
+            </Marker>
+          );
+        })}
       </Map>
 
       <View style={styles.zoomControls}>
@@ -256,4 +267,11 @@ const styles = StyleSheet.create({
     fontSize: 11,
     lineHeight: 16,
   },
+  labelAction: {
+    color: theme.colors.brandMuted,
+    fontSize: 11,
+    fontWeight: "700",
+    lineHeight: 16,
+    marginTop: 4,
+  },
 });