feat: setup bottom tab navigation and base screens

frontend/src/app/_layout.tsx

@@ -11,12 +11,45 @@ export default function Layout() {
         tabBarInactiveTintColor: "#9CA3AF",
 
         tabBarStyle: {
-          height: 70,
+          position: "absolute",
-          paddingBottom: 10,
+          bottom: 5,
-          paddingTop: 10,
+          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 }) => (
+          tabBarIcon: ({ focused, color }) => (
-            <Ionicons name="home-outline" size={size} color={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 }) => (
+          tabBarIcon: ({ focused, color }) => (
-            <Ionicons name="notifications-outline" size={size} color={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 }) => (
+          tabBarIcon: ({ focused, color }) => (
-            <Ionicons name="leaf-outline" size={size} color={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 }) => (
+          tabBarIcon: ({ focused, color }) => (
-            <Ionicons name="person-outline" size={size} color={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/profile.tsx

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