Merge pull request 'Background fixes & improvements' (#37) from mobile_app_hotfixes into main

Reviewed-on: #37

.gitignore

@@ -3,6 +3,7 @@ dist/
 dev-dist/
 build/
 .turbo/
+.mimocode/
 *.sqlite
 *.sqlite3
 .env

.mimocode/.cron-lock

@@ -1 +1 @@
-{"pid":10782,"startedAt":1783578681151}
+{"pid":568607,"startedAt":1784046408782}

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

@@ -55,6 +55,8 @@ export default function TabLayout() {
           fontWeight: '600',
           fontSize: isTablet ? 20 : 17,
         },
+        sceneContainerStyle: { backgroundColor: 'transparent' },
+        sceneStyle: { backgroundColor: 'transparent' },
       }}
     >
       <Tabs.Screen

apps/frontend-mobile/app/_layout.tsx

@@ -50,6 +50,7 @@ function RootLayoutInner() {
           headerStyle: { backgroundColor: colors.card },
           headerTintColor: colors.primary,
           headerTitleStyle: { color: colors.text, fontWeight: '600' },
+          contentStyle: { backgroundColor: 'transparent' },
         }}
       >
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
@@ -99,7 +100,7 @@ function ThemedBackground({ children }: { children: React.ReactNode }) {
         resizeMode="cover"
       />
       <View style={[styles.overlay, isDark && styles.overlayDark]} pointerEvents="none" />
-      <View style={styles.content}>
+      <View style={styles.content} pointerEvents="auto">
         {children}
       </View>
     </View>
@@ -127,17 +128,30 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   bgImage: {
-    ...StyleSheet.absoluteFillObject,
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
     opacity: 0.55,
+    zIndex: 0,
   },
   overlay: {
-    ...StyleSheet.absoluteFillObject,
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
     backgroundColor: 'rgba(255, 252, 245, 0.48)',
+    zIndex: 1,
   },
   overlayDark: {
     backgroundColor: 'rgba(0, 0, 0, 0.25)',
   },
   content: {
     flex: 1,
+    zIndex: 2,
   },
 });

apps/frontend-mobile/metro.config.js

@@ -0,0 +1,21 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
+
+const projectRoot = __dirname;
+const monorepoRoot = path.resolve(projectRoot, "../..");
+
+const config = getDefaultConfig(projectRoot);
+
+// Watch the monorepo root so Metro sees all workspace packages
+config.watchFolders = [monorepoRoot];
+
+// Resolve modules from both the workspace and root node_modules
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, "node_modules"),
+  path.resolve(monorepoRoot, "node_modules"),
+];
+
+// Ensure symlinks are followed (npm workspaces use symlinks)
+config.resolver.unstable_enableSymlinks = true;
+
+module.exports = config;

apps/frontend-mobile/package.json

@@ -4,6 +4,7 @@
   "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",
@@ -13,7 +14,6 @@
     "expo-constants": "~57.0.3",
     "expo-dev-client": "~57.0.5",
     "expo-device": "~7.0.2",
-    "@grafana/faro-react-native": "^1.2.1",
     "expo-image-picker": "~57.0.2",
     "expo-linking": "~57.0.1",
     "expo-local-authentication": "~57.0.0",

package-lock.json

@@ -138,7 +138,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/vector-icons": "^15.0.2",
-        "@grafana/faro-react-native": "^1.2.1",
+        "@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",
@@ -416,6 +416,7 @@
       "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",