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

@@ -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: {

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}>
+      <SafeAreaProvider>
-        <Stack
+        <QueryClientProvider client={queryClient}>
-          screenOptions={{
+          <Stack
-            headerStyle: { backgroundColor: colors.card },
+            screenOptions={{
-            headerTintColor: colors.primary,
+              headerStyle: { backgroundColor: colors.card },
-            headerTitleStyle: { color: colors.text, fontWeight: '600' },
+              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 
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-            name="auth/login" 
+            <Stack.Screen 
-            options={{ 
+              name="medicine/[id]" 
-              title: 'Iniciar Sesión',
+              options={{ title: 'Medicamento' }} 
-              headerShown: false,
+            />
-            }} 
+            <Stack.Screen 
-          />
+              name="pharmacy/[id]" 
-          <Stack.Screen 
+              options={{ title: 'Farmacia' }} 
-            name="auth/register" 
+            />
-            options={{ 
+            <Stack.Screen 
-              title: 'Registrarse',
+              name="scanner" 
-              headerShown: false,
+              options={{ 
-            }} 
+                title: 'Escanear',
-          />
+                headerShown: false,
-        </Stack>
+              }} 
-        <StatusBar style="auto" />
+            />
-      </QueryClientProvider>
+            <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>
   );
 }