profile

src/navigation/BottomTabs.tsx

@@ -1,23 +1,20 @@
 import React from "react";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { View, Text, StyleSheet, Platform } from "react-native";
-import { Ionicons } from '@react-native-vector-icons/ionicons';
+import {Ionicons} from "@react-native-vector-icons/ionicons"; // ✅ corrected import
 import GroupScreen from "../screens/GroupScreen";
 import ProfileScreen from "../screens/ProfileScreen";
 
 const Tab = createBottomTabNavigator();
 
 const TAB_CONFIG = {
-  activeColor: "#eb87a3ff", // coffee-like orange
-  inactiveColor: "#000000ff",
-  backgroundColor: "#e3e9efff",
-  height: 80,
-  iconSize: 30,
-  labelSize: 12,
-  labelWeight: "600",
+  activeColor: "#000", 
+  inactiveColor: "#8e8e93", 
+  backgroundColor: "#fff",
+  height: 70,
+  iconSize: 26,
 };
 
-// Dummy Screens
 function HomeScreen() {
   return (
     <View style={styles.screen}>
@@ -39,18 +36,14 @@ export default function BottomTabs() {
     <Tab.Navigator
       screenOptions={({ route }) => ({
         headerShown: false,
+        tabBarShowLabel: true, // ✅ no labels, only icons
         tabBarStyle: styles.tabBar,
-        tabBarActiveTintColor: TAB_CONFIG.activeColor,
-        tabBarInactiveTintColor: TAB_CONFIG.inactiveColor,
-        tabBarLabelStyle: {
-          fontSize: TAB_CONFIG.labelSize,
-          fontWeight: TAB_CONFIG.labelWeight as any,
-          marginBottom: Platform.OS === "ios" ? 0 : 5,
-        },
+        
         tabBarIcon: ({ color, focused }) => {
           let iconName: string = "home-outline";
 
-          if (route.name === "Home") iconName = focused ? "home" : "home-outline";
+          if (route.name === "Home")
+            iconName = focused ? "home" : "home-outline";
           else if (route.name === "Profile")
             iconName = focused ? "person" : "person-outline";
           else if (route.name === "Settings")
@@ -58,13 +51,26 @@ export default function BottomTabs() {
           else if (route.name === "Group")
             iconName = focused ? "people" : "people-outline";
 
-          return <Ionicons name={iconName} size={TAB_CONFIG.iconSize} color={color} />;
+          return (
+            <View
+              style={[
+                styles.iconContainer,
+                focused && styles.activeIconContainer,
+              ]}
+            >
+              <Ionicons
+                name={iconName}
+                size={TAB_CONFIG.iconSize}
+                color={focused ? "#fff" : TAB_CONFIG.inactiveColor}
+              />
+            </View>
+          );
         },
       })}
     >
       <Tab.Screen name="Home" component={HomeScreen} />
       <Tab.Screen name="Profile" component={ProfileScreen} />
-         <Tab.Screen name="Group" component={GroupScreen} />
+      <Tab.Screen name="Group" component={GroupScreen} />
       <Tab.Screen name="Settings" component={SettingsScreen} />
     </Tab.Navigator>
   );
@@ -75,7 +81,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#dae4ed",
+    backgroundColor: "#f5f7fa",
   },
   text: {
     fontSize: 20,
@@ -84,19 +90,30 @@ const styles = StyleSheet.create({
   },
   tabBar: {
     position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
+    bottom: 20,
+    left: 20,
+    right: 20,
     height: TAB_CONFIG.height,
     backgroundColor: TAB_CONFIG.backgroundColor,
-    borderTopLeftRadius: 30,
-    borderTopRightRadius: 30,
+    borderRadius: 20 ,
     shadowColor: "#000",
-    shadowOpacity: 0.10,
-    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 5 },
     shadowRadius: 8,
-    elevation: 20,
-    paddingTop:10,
-    borderTopWidth: 0,
+    elevation: 10,
+    paddingBottom: Platform.OS === "ios" ? 25 : 10,
+    paddingTop: 10,
+    marginHorizontal:10
+  },
+  iconContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    width: 60,
+    height: 60,
+    marginTop:10,
+    borderRadius: 15,
+  },
+  activeIconContainer: {
+    backgroundColor: "#000", // active circle background
   },
 });