From 513d9c3c7dd17f17f98daf9276d27221087f4e1c Mon Sep 17 00:00:00 2001 From: Sergei Date: Sat, 24 Jan 2026 20:33:59 -0800 Subject: [PATCH] fix: Use safe area insets for tab bar to avoid Samsung nav button overlap MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use useSafeAreaInsets() to dynamically calculate tab bar height and bottom padding instead of hardcoded values. This ensures the tab bar properly accounts for Android navigation buttons (Samsung) and iOS home indicator. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/(tabs)/_layout.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index a28ec62..143e62b 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -1,6 +1,7 @@ import { Tabs } from 'expo-router'; import React from 'react'; import { Feather } from '@expo/vector-icons'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { HapticTab } from '@/components/haptic-tab'; import { AppColors } from '@/constants/theme'; @@ -9,6 +10,14 @@ import { useColorScheme } from '@/hooks/use-color-scheme'; export default function TabLayout() { const colorScheme = useColorScheme(); const isDark = colorScheme === 'dark'; + 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); + const tabBarHeight = 60 + bottomPadding; // 60px for content + safe area padding return (