Faro & OSM

apps/frontend-mobile/app/medicine/[id].tsx

@@ -3,6 +3,7 @@ import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Linking } from 'r
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import * as Location from 'expo-location';
+import MapView, { Marker, UrlTile, PROVIDER_DEFAULT } from 'react-native-maps';
 import { getMedicine, getMedicinePharmacies } from '../../services/medicines';
 import { subscribeToMedicine, unsubscribeFromMedicine } from '../../services/notifications';
 import { useAuth } from '../../hooks/useAuth';
@@ -205,11 +206,39 @@ export default function MedicineDetailScreen() {
       </View>
 
       {locatedPharmacies.length > 0 && (
-        <View style={[styles.mapContainer, { backgroundColor: colors.surfaceVariant }]}>
-          <Ionicons name="map-outline" size={48} color={colors.textSecondary} />
-          <Text style={[styles.mapPlaceholder, { color: colors.textSecondary }]}>
-            {t('medicine.mapSoon')}
-          </Text>
+        <View style={styles.mapContainer}>
+          <MapView
+            style={styles.map}
+            provider={PROVIDER_DEFAULT}
+            mapType="none"
+            initialRegion={{
+              latitude: mapCenter.latitude,
+              longitude: mapCenter.longitude,
+              latitudeDelta: 0.05,
+              longitudeDelta: 0.05,
+            }}
+          >
+            <UrlTile
+              urlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+              maximumZ={19}
+              flipY={false}
+              tileSize={256}
+            />
+            {locatedPharmacies.map((pharm) => {
+              const lat = getPharmacyLat(pharm);
+              const lon = getPharmacyLon(pharm);
+              if (lat == null || lon == null) return null;
+              return (
+                <Marker
+                  key={pharm.id}
+                  coordinate={{ latitude: lat, longitude: lon }}
+                  title={pharm.pharmacy?.name || pharm.name}
+                  description={pharm.pharmacy?.address || pharm.address}
+                  onCalloutPress={() => router.push(`/pharmacy/${pharm.pharmacy_id || pharm.id}`)}
+                />
+              );
+            })}
+          </MapView>
         </View>
       )}
 
@@ -362,13 +391,9 @@ const styles = StyleSheet.create({
     height: 200,
     borderRadius: borderRadius.lg,
     overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: spacing.sm,
   },
-  mapPlaceholder: {
-    fontSize: 14,
-    fontWeight: '500',
+  map: {
+    flex: 1,
   },
   pharmaciesSection: {
     marginTop: spacing.sm,