app

frontend/src/app/_layout.tsx

@@ -11,12 +11,45 @@ export default function Layout() {
         tabBarInactiveTintColor: "#9CA3AF",
 
         tabBarStyle: {
-          height: 70,
-          paddingBottom: 10,
-          paddingTop: 10,
+          position: "absolute",
+          bottom: 5,
+          left: 20,
+          right: 20,
+
+          height: 82,
+
+          borderRadius: 25,
+
           backgroundColor: "#FFFFFF",
+
           borderTopWidth: 0,
-          elevation: 8,
+
+          shadowColor: "#000",
+          shadowOffset: {
+            width: 0,
+            height: 10,
+          },
+
+          shadowOpacity: 0.08,
+          shadowRadius: 10,
+
+          elevation: 10,
+
+          paddingHorizontal: 10,
+        },
+
+        tabBarLabelStyle: {
+          fontSize: 11,
+          fontWeight: "400",
+          marginBottom: 8,
+        },
+
+        tabBarItemStyle: {
+          paddingTop: 6,
+          paddingBottom: 4,
+          borderRadius: 18,
+          marginVertical: 6,
+          marginHorizontal: 4,
         },
       }}
     >
@@ -24,8 +57,12 @@ export default function Layout() {
         name="index"
         options={{
           title: "Inicio",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="home-outline" size={size} color={color} />
+          tabBarIcon: ({ focused, color }) => (
+            <Ionicons
+              name={focused ? "home" : "home-outline"}
+              size={focused ? 28 : 24}
+              color={color}
+            />
           ),
         }}
       />
@@ -34,8 +71,12 @@ export default function Layout() {
         name="alerts"
         options={{
           title: "Alertas",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="notifications-outline" size={size} color={color} />
+          tabBarIcon: ({ focused, color }) => (
+            <Ionicons
+              name={focused ? "notifications" : "notifications-outline"}
+              size={focused ? 28 : 24}
+              color={color}
+            />
           ),
         }}
       />
@@ -44,8 +85,12 @@ export default function Layout() {
         name="guide"
         options={{
           title: "Guía",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="leaf-outline" size={size} color={color} />
+          tabBarIcon: ({ focused, color }) => (
+            <Ionicons
+              name={focused ? "leaf" : "leaf-outline"}
+              size={focused ? 28 : 24}
+              color={color}
+            />
           ),
         }}
       />
@@ -54,8 +99,12 @@ export default function Layout() {
         name="profile"
         options={{
           title: "Perfil",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="person-outline" size={size} color={color} />
+          tabBarIcon: ({ focused, color }) => (
+            <Ionicons
+              name={focused ? "person" : "person-outline"}
+              size={focused ? 28 : 24}
+              color={color}
+            />
           ),
         }}
       />

frontend/src/app/guide.tsx

@@ -8,7 +8,7 @@ export default function GuideScreen() {
                 justifyContent: "center",
                 alignItems: "center",
             }}
-        >
+            >
         <Text>Guía</Text>
         </View>
     );

frontend/src/app/index.tsx

@@ -1,4 +1,4 @@
-/*import { View, Text, ScrollView } from "react-native";
+import { View, Text } from "react-native";
 
 export default function HomeScreen() {
   return (
@@ -12,91 +12,4 @@ export default function HomeScreen() {
       <Text>Inicio</Text>
     </View>
   );
-}*/
-
-import { View, ScrollView } from 'react-native';
-
-import EtaCard from '../components/EtaCard';
-import QuickAction from '../components/QuickAction';
-import SectionTitle from '../components/SectionTitle';
-import AlertItem from '../components/Alertltem';
-
-export default function Home() {
-  return (
-    <ScrollView
-      style={{ flex: 1, backgroundColor: '#ffffff' }}
-      showsVerticalScrollIndicator={false}
-    >
-
-      {/*ETA*/}
-      <EtaCard
-        minutes={12}
-        status="Camión en ruta 🚛"
-      />
-
-      {/*ACCIONES RÁPIDAS*/}
-      <SectionTitle title="Acciones rápidas" />
-
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'space-around',
-          paddingHorizontal: 10,
-          marginTop: 10,
-        }}
-      >
-        <QuickAction title="Mapa" icon="🗺️" />
-        <QuickAction title="Reportar" icon="🚨" />
-        <QuickAction title="Horarios" icon="🕒" />
-      </View>
-
-      {/*IMPACTO SEMANAL*/}
-      <SectionTitle title="Impacto semanal" />
-
-      <View
-        style={{
-          marginHorizontal: 15,
-          backgroundColor: '#F0F0F3',
-          padding: 20,
-          borderRadius: 16,
-        }}
-      >
-        <AlertItem
-          message="🚛 5 recolecciones completadas"
-          type="success"
-        />
-
-        <AlertItem
-          message="⏱ Sin retrasos esta semana"
-          type="success"
-        />
-
-        <AlertItem
-          message="📍 Cobertura completa en tu zona"
-          type="success"
-        />
-      </View>
-
-      {/* 🔔 ALERTAS RECIENTES */}
-      <SectionTitle title="Alertas recientes" />
-
-      <View style={{ marginBottom: 40 }}>
-        <AlertItem
-          message="🚛 Ruta iniciada"
-          type="success"
-        />
-
-        <AlertItem
-          message="📍 Camión cerca de tu zona"
-          type="warning"
-        />
-
-        <AlertItem
-          message="⏳ Retraso detectado"
-          type="danger"
-        />
-      </View>
-
-    </ScrollView>
-  );
 }

frontend/src/app/profile.tsx

@@ -4,12 +4,12 @@ export default function ProfileScreen() {
     return (
         <View
             style={{
-                    flex: 1,
-                    justifyContent: "center",
-                    alignItems: "center",
-                }}
-            >
-            <Text>Perfil</Text>
+                flex: 1,
+                justifyContent: "center",
+                alignItems: "center",
+            }}
+        >
+        <Text>Perfil</Text>
         </View>
     );
-}
+}