`apps/mobile/app/(tabs)/_layout.tsx`

74 lines
import { Tabs } from 'expo-router';
import { Platform } from 'react-native';

// Simple inline SVG-style icon via text — no icon library dependency.
// Replace with react-native-vector-icons or @expo/vector-icons when desired.
const ICONS: Record<string, string> = {
  browse: '🏠',
  saved: '♥',
  map: '🗺',
  alerts: '🔔',
};

const BRAND = '#1a3a6e';
const ACCENT = '#e07b39';

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: ACCENT,
        tabBarInactiveTintColor: '#888',
        tabBarStyle: {
          backgroundColor: '#fff',
          borderTopColor: '#e5e7eb',
          // Extra bottom padding on iOS for home indicator
          paddingBottom: Platform.OS === 'ios' ? 8 : 4,
          height: Platform.OS === 'ios' ? 84 : 64,
        },
        tabBarLabelStyle: {
          fontSize: 11,
          fontWeight: '600',
        },
        headerStyle: { backgroundColor: BRAND },
        headerTintColor: '#fff',
        headerTitleStyle: { fontWeight: '700', fontSize: 17 },
      }}
    >
      <Tabs.Screen
        name="browse"
        options={{
          title: 'Browse',
          headerShown: false, // WebView tab manages its own chrome
          tabBarIcon: ({ color }) => (
            // We use simple text chars; swap to <Ionicons> if icon pack added
            null
          ),
          tabBarLabel: `${ICONS.browse}  Browse`,
        }}
      />
      <Tabs.Screen
        name="saved"
        options={{
          title: 'Saved Homes',
          tabBarLabel: `${ICONS.saved}  Saved`,
        }}
      />
      <Tabs.Screen
        name="map"
        options={{
          title: 'Map',
          tabBarLabel: `${ICONS.map}  Map`,
        }}
      />
      <Tabs.Screen
        name="alerts"
        options={{
          title: 'Alerts',
          tabBarLabel: `${ICONS.alerts}  Alerts`,
        }}
      />
    </Tabs>
  );
}