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 (
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}