Faro & OSM

apps/frontend-mobile/.env.example

@@ -6,8 +6,3 @@ EXPO_PUBLIC_API_URL=http://localhost:3001/api
 
 # For production builds, update this to:
 # EXPO_PUBLIC_API_URL=https://api.yourdomain.com/api
-
-# Grafana Alloy OTLP/HTTP endpoint for Faro RUM (must be reachable from the
-# device — use a LAN IP / public hostname, NOT localhost).
-# Open router :4318 → srv84-macos:4318, or proxy /faro via Nginx Proxy Manager.
-EXPO_PUBLIC_FARO_URL=http://grafana.hacecalor.net:4318

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 }]}>
+        <View style={styles.mapContainer}>
-          <Ionicons name="map-outline" size={48} color={colors.textSecondary} />
+          <MapView
-          <Text style={[styles.mapPlaceholder, { color: colors.textSecondary }]}>
+            style={styles.map}
-            {t('medicine.mapSoon')}
+            provider={PROVIDER_DEFAULT}
-          </Text>
+            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: {
+  map: {
-    fontSize: 14,
+    flex: 1,
-    fontWeight: '500',
   },
   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,

apps/frontend-mobile/package.json

@@ -4,7 +4,6 @@
   "main": "expo-router/entry",
   "dependencies": {
     "@expo/vector-icons": "^15.0.2",
-    "@grafana/faro-react-native": "^1.3.0",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@tanstack/react-query": "^5.101.2",
     "axios": "^1.18.1",

apps/frontend-mobile/services/faro.ts

@@ -1,36 +0,0 @@
-import { initializeFaro } from '@grafana/faro-react-native';
-
-let initialized = false;
-
-/**
- * Initializes Grafana Faro RUM for the React Native app.
- *
- * Telemetry (crashes, JS errors, console, app-start, memory/ANR vitals,
- * session + screen tracking) is sent OTLP/HTTP to the Alloy collector.
- *
- * NOTE: `@grafana/faro-react-native` ships a native module, so it requires a
- * custom dev build / EAS build (not Expo Go). Initialization is wrapped in a
- * try/catch so a collector outage never crashes the app.
- */
-export function initFaro(): void {
-  if (initialized) return;
-  initialized = true;
-
-  try {
-    const url =
-      process.env.EXPO_PUBLIC_FARO_URL || 'http://grafana.hacecalor.net:4318';
-
-    initializeFaro({
-      app: {
-        name: 'farmafinder-mobile',
-        version: '1.0.0',
-        environment: __DEV__ ? 'development' : 'production',
-      },
-      url,
-      sessionTracking: { enabled: true },
-      // Crash/JS error/console capture are on by default.
-    });
-  } catch (err) {
-    console.warn('[faro] initialization failed:', err);
-  }
-}

package-lock.json

@@ -138,7 +138,6 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/vector-icons": "^15.0.2",
-        "@grafana/faro-react-native": "^1.3.0",
         "@react-native-async-storage/async-storage": "2.2.0",
         "@tanstack/react-query": "^5.101.2",
         "axios": "^1.18.1",
@@ -403,158 +402,6 @@
         "react-native": "*"
       }
     },
-    "apps/frontend-mobile/node_modules/@grafana/faro-core": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/@grafana/faro-core/-/faro-core-2.8.2.tgz",
-      "integrity": "sha512-63C6+N/P9/ySUMaGut8yVb1DkPuHS5I/lfRm97+aDXFj3+8pxRT/QzyXNe0r6KMU5O95wC9FLVGxG9ZvkwEhJQ==",
-      "dependencies": {
-        "@opentelemetry/api": "^1.9.0",
-        "@opentelemetry/otlp-transformer": "^0.219.0"
-      }
-    },
-    "apps/frontend-mobile/node_modules/@grafana/faro-react-native": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@grafana/faro-react-native/-/faro-react-native-1.3.0.tgz",
-      "integrity": "sha512-KeohD3S2xmiukL5YW3mOGDqvFiwpD9IzJ2EtZ50ktEsnA+6EMt2AtJ8RzJfAamGTYqemBpDiw51rqB4ID+C2xg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@grafana/faro-core": "^2.7.0",
-        "@react-native-async-storage/async-storage": "^1.21.0",
-        "react-native-device-info": "^11.1.0"
-      },
-      "peerDependencies": {
-        "@react-navigation/native": ">=6.0.0",
-        "react": ">=18.0.0",
-        "react-native": ">=0.70.0",
-        "react-native-mmkv": ">=2.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@react-navigation/native": {
-          "optional": true
-        },
-        "react-native-mmkv": {
-          "optional": true
-        }
-      }
-    },
-    "apps/frontend-mobile/node_modules/@grafana/faro-react-native/node_modules/@react-native-async-storage/async-storage": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.24.0.tgz",
-      "integrity": "sha512-W4/vbwUOYOjco0x3toB8QCr7EjIP6nE9G7o8PMguvvjYT5Awg09lyV4enACRx4s++PPulBiBSjL0KTFx2u0Z/g==",
-      "dependencies": {
-        "merge-options": "^3.0.4"
-      },
-      "peerDependencies": {
-        "react-native": "^0.0.0-0 || >=0.60 <1.0"
-      }
-    },
-    "apps/frontend-mobile/node_modules/@opentelemetry/api-logs": {
-      "version": "0.219.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.219.0.tgz",
-      "integrity": "sha512-FFx7YnaYJlIjqWW/AG/yAZ0L/NEY724PipXXXQLdtZPbLwBGbUMTGL1i/esI56TWfTUXxhLfpgrnWJCG8aUJyg==",
-      "dependencies": {
-        "@opentelemetry/api": "^1.3.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "apps/frontend-mobile/node_modules/@opentelemetry/core": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.8.0.tgz",
-      "integrity": "sha512-hd1Lfh8p545nNz+jq1Ejfz+Mn1hyLuxYn1YzTfFNrxr8urEWMNQLPf1Th8kjOH+HxwawCrtgBp8JpBUR4ZSgww==",
-      "dependencies": {
-        "@opentelemetry/semantic-conventions": "^1.29.0"
-      },
-      "engines": {
-        "node": "^18.19.0 || >=20.6.0"
-      },
-      "peerDependencies": {
-        "@opentelemetry/api": ">=1.0.0 <1.10.0"
-      }
-    },
-    "apps/frontend-mobile/node_modules/@opentelemetry/otlp-transformer": {
-      "version": "0.219.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-transformer/-/otlp-transformer-0.219.0.tgz",
-      "integrity": "sha512-aaYKAyXhw9VchKZVGOopD3Gw/kPsyrX2c6IQ0AW32mTjqmZOh5Y6Gf5OYqTNqVktAeBjmFinhyFaCwW6GYK9YQ==",
-      "dependencies": {
-        "@opentelemetry/api-logs": "0.219.0",
-        "@opentelemetry/core": "2.8.0",
-        "@opentelemetry/resources": "2.8.0",
-        "@opentelemetry/sdk-logs": "0.219.0",
-        "@opentelemetry/sdk-metrics": "2.8.0",
-        "@opentelemetry/sdk-trace-base": "2.8.0"
-      },
-      "engines": {
-        "node": "^18.19.0 || >=20.6.0"
-      },
-      "peerDependencies": {
-        "@opentelemetry/api": "^1.3.0"
-      }
-    },
-    "apps/frontend-mobile/node_modules/@opentelemetry/resources": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.8.0.tgz",
-      "integrity": "sha512-qmXQ27ilDbUK/vGMqwL8D4/rhn76C+sherM4wTbjlfknR8Nvfc/hCxjRJPhkzZzUsPiNg16SA31NxMabwttRjg==",
-      "dependencies": {
-        "@opentelemetry/core": "2.8.0",
-        "@opentelemetry/semantic-conventions": "^1.29.0"
-      },
-      "engines": {
-        "node": "^18.19.0 || >=20.6.0"
-      },
-      "peerDependencies": {
-        "@opentelemetry/api": ">=1.3.0 <1.10.0"
-      }
-    },
-    "apps/frontend-mobile/node_modules/@opentelemetry/sdk-logs": {
-      "version": "0.219.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-logs/-/sdk-logs-0.219.0.tgz",
-      "integrity": "sha512-s6lTKRakaPClvKoWHRChxnXjDMkM/TQ30ff78jN6EBGf7MI7VzANE5PU3f4z9qDUudWjvZjOLHG0rBnBKYvoXA==",
-      "dependencies": {
-        "@opentelemetry/api-logs": "0.219.0",
-        "@opentelemetry/core": "2.8.0",
-        "@opentelemetry/resources": "2.8.0",
-        "@opentelemetry/semantic-conventions": "^1.29.0"
-      },
-      "engines": {
-        "node": "^18.19.0 || >=20.6.0"
-      },
-      "peerDependencies": {
-        "@opentelemetry/api": ">=1.4.0 <1.10.0"
-      }
-    },
-    "apps/frontend-mobile/node_modules/@opentelemetry/sdk-metrics": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-metrics/-/sdk-metrics-2.8.0.tgz",
-      "integrity": "sha512-UDBGaj6W0Rgy5rTTaoxs8gVGF/aGkAKyjurJv7se6wjRxJu7FoquTLT/vt54DZfo4crbprYfhX/SOK9+BPw1qg==",
-      "dependencies": {
-        "@opentelemetry/core": "2.8.0",
-        "@opentelemetry/resources": "2.8.0"
-      },
-      "engines": {
-        "node": "^18.19.0 || >=20.6.0"
-      },
-      "peerDependencies": {
-        "@opentelemetry/api": ">=1.9.0 <1.10.0"
-      }
-    },
-    "apps/frontend-mobile/node_modules/@opentelemetry/sdk-trace-base": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-2.8.0.tgz",
-      "integrity": "sha512-mhU4jp+vW0mGbFRd+GeXHvmfA4aDqWjBjLC3pE5XMpLs0IE2ryYb019Ts2AQrOq67gaTF25D91+fgvEHDZEnuQ==",
-      "dependencies": {
-        "@opentelemetry/core": "2.8.0",
-        "@opentelemetry/resources": "2.8.0",
-        "@opentelemetry/semantic-conventions": "^1.29.0"
-      },
-      "engines": {
-        "node": "^18.19.0 || >=20.6.0"
-      },
-      "peerDependencies": {
-        "@opentelemetry/api": ">=1.3.0 <1.10.0"
-      }
-    },
     "apps/frontend-mobile/node_modules/@react-native-async-storage/async-storage": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz",
@@ -1277,14 +1124,6 @@
         }
       }
     },
-    "apps/frontend-mobile/node_modules/react-native-device-info": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-11.1.0.tgz",
-      "integrity": "sha512-hzXJSObJdezEz0hF7MAJ3tGeoesuQWenXXt9mrQR9Mjb8kXpZ09rqSsZ/quNpJdZpQ3rYiFa3/0GFG5KNn9PBg==",
-      "peerDependencies": {
-        "react-native": "*"
-      }
-    },
     "apps/frontend-mobile/node_modules/react-native-drawer-layout": {
       "version": "4.2.7",
       "resolved": "https://registry.npmjs.org/react-native-drawer-layout/-/react-native-drawer-layout-4.2.7.tgz",