From 5d2e8c029f4d4a12f1f8a94dec0958a56a3020bd Mon Sep 17 00:00:00 2001 From: Sergei Date: Sat, 24 Jan 2026 20:59:49 -0800 Subject: [PATCH] fix: Prevent tab bar from being overlapped by Android navigation buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add SafeAreaProvider wrapper in root layout for reliable insets on Android - Add minimum 16px bottom padding on Android to prevent overlap with gesture navigation or software buttons (Samsung, Pixel, etc.) - Keep 10px minimum for other platforms 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/(tabs)/_layout.tsx | 10 +++++++--- app/_layout.tsx | 25 ++++++++++++++----------- 2 files changed, 21 insertions(+), 14 deletions(-) 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 ( - - - - - - - - - - - + + + + + + + + + + + + + ); }