Mobile App design

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

@@ -1,12 +1,16 @@
 import { Tabs } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
-import { View, StyleSheet, Platform, useWindowDimensions } from 'react-native';
+import { View, StyleSheet, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { colors, shadows } from '../../constants/theme';
+import { useThemeContext } from '../../components/ThemeProvider';
+import { shadows } from '../../constants/theme';
 
 const TABLET_MIN_WIDTH = 768;
 
-function ScanIcon({ color, size }: { color: string; size: number }) {
+// 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]}>
@@ -20,7 +24,9 @@ export default function TabLayout() {
   const insets = useSafeAreaInsets();
   const { width } = useWindowDimensions();
   const isTablet = width >= TABLET_MIN_WIDTH;
-  const bottomPadding = Platform.OS === 'ios' ? insets.bottom : 8;
+  const { colors } = useThemeContext();
+  // 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
@@ -28,24 +34,31 @@ export default function TabLayout() {
         tabBarActiveTintColor: colors.primary,
         tabBarInactiveTintColor: colors.textSecondary,
         tabBarStyle: {
-          ...(isTablet ? styles.tabBarTablet : styles.tabBar),
+          ...(isTablet ? styles.tabBarTablet : {}),
+          backgroundColor: colors.card,
+          borderTopColor: colors.border,
+          paddingTop: isTablet ? 10 : 8,
           height: (isTablet ? 64 : 60) + bottomPadding,
           paddingBottom: bottomPadding,
+          ...(isTablet ? { paddingHorizontal: 24 } : {}),
         },
         tabBarLabelStyle: {
-          ...styles.tabBarLabel,
-          ...(isTablet ? styles.tabBarLabelTablet : {}),
+          fontSize: isTablet ? 13 : 11,
+          fontWeight: '500',
+        },
+        headerStyle: {
+          backgroundColor: colors.card,
         },
-        headerStyle: styles.header,
         headerTintColor: colors.primary,
         headerTitleStyle: {
-          ...styles.headerTitle,
-          ...(isTablet ? styles.headerTitleTablet : {}),
+          color: colors.text,
+          fontWeight: '600',
+          fontSize: isTablet ? 20 : 17,
         },
       }}
     >
       <Tabs.Screen
-        name="home"
+        name="index"
         options={{
           title: 'Inicio',
           tabBarIcon: ({ color, size }) => (
@@ -54,7 +67,7 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="index"
+        name="search"
         options={{
           title: 'Buscar',
           tabBarIcon: ({ color, size }) => (
@@ -99,40 +112,6 @@ export default function TabLayout() {
 }
 
 const styles = StyleSheet.create({
-  tabBar: {
-    backgroundColor: colors.card,
-    borderTopColor: colors.border,
-    paddingTop: 8,
-  },
-  tabBarTablet: {
-    backgroundColor: colors.card,
-    borderTopColor: colors.border,
-    paddingTop: 10,
-    paddingHorizontal: 24,
-  },
-  tabBarLabel: {
-    fontSize: 11,
-    fontWeight: '500',
-  },
-  tabBarLabelTablet: {
-    fontSize: 13,
-  },
-  header: {
-    backgroundColor: colors.card,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    elevation: 1,
-  },
-  headerTitle: {
-    color: colors.text,
-    fontWeight: '600',
-    fontSize: 17,
-  },
-  headerTitleTablet: {
-    fontSize: 20,
-  },
   fabContainer: {
     position: 'absolute',
     top: -16,
@@ -142,7 +121,7 @@ const styles = StyleSheet.create({
     width: 52,
     height: 52,
     borderRadius: 26,
-    backgroundColor: colors.scanButton,
+    backgroundColor: '#2b5bb5',
     alignItems: 'center',
     justifyContent: 'center',
   },