diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 2264867..176ef82 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -1,5 +1,6 @@ import { Tabs } from 'expo-router'; import React from 'react'; +import { Platform } from 'react-native'; import { Feather } from '@expo/vector-icons'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; @@ -13,10 +14,13 @@ export default function TabLayout() { const insets = useSafeAreaInsets(); // Calculate tab bar height based on safe area - // On Android with navigation buttons (Samsung), insets.bottom is the nav bar height // On iOS with home indicator, insets.bottom is ~34px - // Minimum padding of 10px for devices without safe area - const bottomPadding = Math.max(insets.bottom, 10); + // On Android with gesture navigation or software buttons (Samsung/Pixel): + // - insets.bottom should reflect the navigation bar height + // - But some devices/modes may return 0, so we add a minimum for Android + // Android minimum: 16px to ensure content doesn't touch system buttons + const androidMinPadding = Platform.OS === 'android' ? 16 : 0; + const bottomPadding = Math.max(insets.bottom, androidMinPadding, 10); const tabBarHeight = 60 + bottomPadding; // 60px for content + safe area padding return ( diff --git a/app/_layout.tsx b/app/_layout.tsx index 257e363..2e3522f 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -8,6 +8,7 @@ import { StatusBar } from 'expo-status-bar'; import * as SplashScreen from 'expo-splash-screen'; import 'react-native-reanimated'; import { KeyboardProvider } from 'react-native-keyboard-controller'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; import { useColorScheme } from '@/hooks/use-color-scheme'; import { AuthProvider, useAuth } from '@/contexts/AuthContext'; @@ -63,16 +64,18 @@ function RootLayoutNav() { export default function RootLayout() { return ( - - - - - - - - - - - + + + + + + + + + + + + + ); }