FarmaFinder/apps/frontend-mobile/app/(tabs)/_layout.tsx

import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { View, StyleSheet, useWindowDimensions } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useThemeContext } from '../../components/ThemeProvider';
import { useTranslation } from '../../src/i18n';
import { shadows } from '../../constants/theme';

const TABLET_MIN_WIDTH = 768;

// Standard Android navigation bar heights in dp
const ANDROID_NAV_BAR_HEIGHT = 48;

function ScanIcon({ size }: { size: number }) {
  return (
    <View style={styles.fabContainer}>
      <View style={[styles.fab, shadows.scanButton]}>
        <Ionicons name="scan" size={size} color="#ffffff" />
      </View>
    </View>
  );
}

export default function TabLayout() {
  const insets = useSafeAreaInsets();
  const { width } = useWindowDimensions();
  const isTablet = width >= TABLET_MIN_WIDTH;
  const { colors } = useThemeContext();
  const { t } = useTranslation();
  // Use safe area insets if available, otherwise use standard Android nav bar height
  const bottomPadding = insets.bottom > 0 ? insets.bottom : ANDROID_NAV_BAR_HEIGHT;

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: colors.primary,
        tabBarInactiveTintColor: colors.textSecondary,
        tabBarStyle: {
          ...(isTablet ? styles.tabBarTablet : {}),
          backgroundColor: colors.card,
          borderTopColor: colors.border,
          paddingTop: isTablet ? 10 : 8,
          height: (isTablet ? 64 : 60) + bottomPadding,
          paddingBottom: bottomPadding,
          ...(isTablet ? { paddingHorizontal: 24 } : {}),
        },
        tabBarLabelStyle: {
          fontSize: isTablet ? 13 : 11,
          fontWeight: '500',
        },
        headerStyle: {
          backgroundColor: colors.card,
        },
        headerTintColor: colors.primary,
        headerTitleStyle: {
          color: colors.text,
          fontWeight: '600',
          fontSize: isTablet ? 20 : 17,
        },
        sceneContainerStyle: { backgroundColor: 'transparent' },
        sceneStyle: { backgroundColor: 'transparent' },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: t('nav.home'),
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="search"
        options={{
          title: t('nav.search'),
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="search" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="scan"
        options={{
          title: t('nav.scan'),
          tabBarIcon: ({ color, size }) => <ScanIcon color={color} size={size} />,
          tabBarLabel: () => null,
        }}
      />
      <Tabs.Screen
        name="alerts"
        options={{
          title: t('nav.alerts'),
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="notifications" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="map"
        options={{
          href: null,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: t('nav.profile'),
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="person" size={size} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

const styles = StyleSheet.create({
  fabContainer: {
    position: 'absolute',
    top: -16,
    alignItems: 'center',
  },
  fab: {
    width: 52,
    height: 52,
    borderRadius: 26,
    backgroundColor: '#2b5bb5',
    alignItems: 'center',
    justifyContent: 'center',
  },
});