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.
2026-07-07 21:04:42 +02:00
parent a7834607fb
commit 69ef048388
2 changed files with 53 additions and 44 deletions
@@ -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>
  );
 }