Faro & OSM

apps/frontend-mobile/app/(tabs)/map.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
-import MapView, { Marker } from 'react-native-maps';
+import MapView, { Marker, UrlTile, PROVIDER_DEFAULT } from 'react-native-maps';
 import { useRouter } from 'expo-router';
 import { getPharmacies } from '../../services/pharmacies';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
@@ -54,11 +54,19 @@ export default function MapScreen() {
     <View style={styles.container}>
       <MapView
         style={styles.map}
+        provider={PROVIDER_DEFAULT}
+        mapType="none"
         region={region}
         onRegionChangeComplete={setRegion}
         showsUserLocation={true}
         showsMyLocationButton={true}
       >
+        <UrlTile
+          urlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+          maximumZ={19}
+          flipY={false}
+          tileSize={256}
+        />
         {pharmacies.map((pharmacy) => (
           <Marker
             key={pharmacy.id}

apps/frontend-mobile/app/_layout.tsx

@@ -9,10 +9,6 @@ import { useAuthStore } from '../store/authStore';
 import { registerForPushNotifications, addNotificationListener, addNotificationResponseListener } from '../services/notifications';
 import { ThemeProvider, useThemeContext } from '../components/ThemeProvider';
 import { LanguageProvider, useTranslation } from '../src/i18n';
-import { initFaro } from '../services/faro';
-
-// Boot Faro RUM once, as early as possible.
-initFaro();
 
 const queryClient = new QueryClient();
 

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,

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Linking } from 'react-native';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
-import MapView, { Marker } from 'react-native-maps';
+import MapView, { Marker, UrlTile, PROVIDER_DEFAULT } from 'react-native-maps';
 import { getPharmacy, getPharmacyMedicines } from '../../services/pharmacies';
 import { subscribeToMedicine, unsubscribeFromMedicine } from '../../services/notifications';
 import { useAuth } from '../../hooks/useAuth';
@@ -125,6 +125,8 @@ export default function PharmacyDetailScreen() {
       <View style={styles.mapContainer}>
         <MapView
           style={styles.map}
+          provider={PROVIDER_DEFAULT}
+          mapType="none"
           initialRegion={{
             latitude: pharmacy.latitude,
             longitude: pharmacy.longitude,
@@ -133,6 +135,12 @@ export default function PharmacyDetailScreen() {
           }}
           scrollEnabled={false}
         >
+          <UrlTile
+            urlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+            maximumZ={19}
+            flipY={false}
+            tileSize={256}
+          />
           <Marker
             coordinate={{
               latitude: pharmacy.latitude,