From 69ef048388308c19067a630532e95dc6715056a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antoni=20Nu=C3=B1ez=20Romeu?= <antoni.nunez@ficosa.com>
Date: Tue, 7 Jul 2026 21:04:42 +0200
Subject: [PATCH] fix: tab bar not visible on Android

Add SafeAreaProvider to root layout and use dynamic safe area insets
for tab bar height/padding instead of hardcoded values that didn't
account for Android system navigation bar.
---
 apps/frontend-mobile/app/(tabs)/_layout.tsx | 12 ++-
 apps/frontend-mobile/app/_layout.tsx        | 85 +++++++++++----------
 2 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/apps/frontend-mobile/app/(tabs)/_layout.tsx b/apps/frontend-mobile/app/(tabs)/_layout.tsx
index fc4334c..33f4eca 100644
--- a/apps/frontend-mobile/app/(tabs)/_layout.tsx
+++ b/apps/frontend-mobile/app/(tabs)/_layout.tsx
@@ -1,6 +1,7 @@
 import { Tabs } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { View, StyleSheet, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { colors, shadows } from '../../constants/theme';
 
 function ScanIcon({ color, size }: { color: string; size: number }) {
@@ -14,12 +15,19 @@ function ScanIcon({ color, size }: { color: string; size: number }) {
 }
 
 export default function TabLayout() {
+  const insets = useSafeAreaInsets();
+  const bottomPadding = Platform.OS === 'ios' ? insets.bottom : 8;
+
   return (
     <Tabs
       screenOptions={{
         tabBarActiveTintColor: colors.primary,
         tabBarInactiveTintColor: colors.textSecondary,
-        tabBarStyle: styles.tabBar,
+        tabBarStyle: {
+          ...styles.tabBar,
+          height: 60 + bottomPadding,
+          paddingBottom: bottomPadding,
+        },
         tabBarLabelStyle: styles.tabBarLabel,
         headerStyle: styles.header,
         headerTintColor: colors.primary,
@@ -84,8 +92,6 @@ const styles = StyleSheet.create({
   tabBar: {
     backgroundColor: colors.card,
     borderTopColor: colors.border,
-    height: Platform.OS === 'ios' ? 88 : 64,
-    paddingBottom: Platform.OS === 'ios' ? 24 : 8,
     paddingTop: 8,
   },
   tabBarLabel: {
diff --git a/apps/frontend-mobile/app/_layout.tsx b/apps/frontend-mobile/app/_layout.tsx
index 77f4f42..22ffb8a 100644
--- a/apps/frontend-mobile/app/_layout.tsx
+++ b/apps/frontend-mobile/app/_layout.tsx
@@ -3,6 +3,7 @@ import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useAuthStore } from '../store/authStore';
 import { registerForPushNotifications, addNotificationListener, addNotificationResponseListener } from '../services/notifications';
 import { colors } from '../constants/theme';
@@ -35,47 +36,49 @@ export default function RootLayout() {
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <QueryClientProvider client={queryClient}>
-        <Stack
-          screenOptions={{
-            headerStyle: { backgroundColor: colors.card },
-            headerTintColor: colors.primary,
-            headerTitleStyle: { color: colors.text, fontWeight: '600' },
-          }}
-        >
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          <Stack.Screen 
-            name="medicine/[id]" 
-            options={{ title: 'Medicamento' }} 
-          />
-          <Stack.Screen 
-            name="pharmacy/[id]" 
-            options={{ title: 'Farmacia' }} 
-          />
-          <Stack.Screen 
-            name="scanner" 
-            options={{ 
-              title: 'Escanear',
-              headerShown: false,
-            }} 
-          />
-          <Stack.Screen 
-            name="auth/login" 
-            options={{ 
-              title: 'Iniciar Sesión',
-              headerShown: false,
-            }} 
-          />
-          <Stack.Screen 
-            name="auth/register" 
-            options={{ 
-              title: 'Registrarse',
-              headerShown: false,
-            }} 
-          />
-        </Stack>
-        <StatusBar style="auto" />
-      </QueryClientProvider>
+      <SafeAreaProvider>
+        <QueryClientProvider client={queryClient}>
+          <Stack
+            screenOptions={{
+              headerStyle: { backgroundColor: colors.card },
+              headerTintColor: colors.primary,
+              headerTitleStyle: { color: colors.text, fontWeight: '600' },
+            }}
+          >
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            <Stack.Screen 
+              name="medicine/[id]" 
+              options={{ title: 'Medicamento' }} 
+            />
+            <Stack.Screen 
+              name="pharmacy/[id]" 
+              options={{ title: 'Farmacia' }} 
+            />
+            <Stack.Screen 
+              name="scanner" 
+              options={{ 
+                title: 'Escanear',
+                headerShown: false,
+              }} 
+            />
+            <Stack.Screen 
+              name="auth/login" 
+              options={{ 
+                title: 'Iniciar Sesión',
+                headerShown: false,
+              }} 
+            />
+            <Stack.Screen 
+              name="auth/register" 
+              options={{ 
+                title: 'Registrarse',
+                headerShown: false,
+              }} 
+            />
+          </Stack>
+          <StatusBar style="auto" />
+        </QueryClientProvider>
+      </SafeAreaProvider>
     </GestureHandlerRootView>
   );
 }