sergei_t/wellnua-lite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Use safe area insets for tab bar to avoid Samsung nav button overlap

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Sergei 2026-01-24 20:33:59 -08:00
parent 89afe86f54
commit 513d9c3c7d
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/(tabs)/_layout.tsx
View File

@ -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 (
<Tabs
@ -18,8 +27,8 @@ export default function TabLayout() {
tabBarStyle: {
backgroundColor: isDark ? '#151718' : AppColors.background,
borderTopColor: isDark ? '#2D3135' : AppColors.border,
height: 85,
paddingBottom: 25,
height: tabBarHeight,
paddingBottom: bottomPadding,
paddingTop: 10,
},
tabBarLabelStyle: {