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({
/>
- {pins.map((pin) => (
- onPinPress?.(pin.id)}
- >
-
-
-
- {pin.title}
- {pin.description ? (
- {pin.description}
+ {pins.map((pin) => {
+ const isSelected = selectedPinId === pin.id;
+
+ return (
+ onPinPress?.(pin.id)}
+ >
+
+
+ {isSelected ? (
+
+ {pin.title}
+ {pin.description ? (
+ {pin.description}
+ ) : null}
+ {!pin.isUserLocation ? (
+
+ Tap again for directions
+
+ ) : null}
+
) : null}
-
-
- ))}
+
+ );
+ })}
@@ -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,
+ },
});