themming and try to create awesome theme

src/navigation/BottomTabs.tsx

@@ -1,73 +1,91 @@
 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, IoniconsIconName } from "@react-native-vector-icons/ionicons";
 import GroupScreen from "../screens/GroupScreen";
 import Profile from "../screens/profile/Profile";
 import Home from "../screens/home/Home";
+import colors from "../components/colors";
+import Setting from "../screens/setting/Setting";
 
 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,
+};
+
+// Background (tab highlight) colors
+const activeTabColors: { [key: string]: string } = {
+  Home: colors.pastelPink,     // Soft pink
+  Profile: colors.pastelBlue,  // Light sky blue
+  Group: colors.pastelGreen,    // Gentle mint green
+  Settings: colors.pastelOrange, // Warm pastel yellow
+};
+
+// Icon/Text colors on active tabs
+const activeIconColors: { [key: string]: string } = {
+  Home: colors.Home,     // Rose red for contrast
+  Profile: colors.Profile,  // Deep sky blue
+  Group: colors.Group,    // Green for freshness
+  Settings: colors.Settings, // Amber for warmth
 };
 
 
 
-function SettingsScreen() {
-  return (
-    <View style={styles.screen}>
-      <Text style={styles.text}>⚙️ Settings</Text>
-    </View>
-  );
-}
-
 export default function BottomTabs() {
   return (
     <Tab.Navigator
       screenOptions={({ route }) => ({
         headerShown: false,
         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:
-            | "home"
-            | "home-outline"
-            | "person"
-            | "person-outline"
-            | "settings"
-            | "settings-outline"
-            | "people"
-            | "people-outline" = "home-outline";
 
+        tabBarLabel: ({ focused, color }) =>
+          !focused ? (
+            <Text style={[styles.label, { color }]}>{route.name}</Text>
+          ) : null,
+
+        tabBarIcon: ({ focused }) => {
+          let iconName: IoniconsIconName = "home-outline";
+          
+          // Determine icon based on route
           if (route.name === "Home") iconName = focused ? "home" : "home-outline";
-          else if (route.name === "Profile")
-            iconName = focused ? "person" : "person-outline";
-          else if (route.name === "Settings")
-            iconName = focused ? "settings" : "settings-outline";
-          else if (route.name === "Group")
-            iconName = focused ? "people" : "people-outline";
+          else if (route.name === "Profile") iconName = focused ? "person" : "person-outline";
+          else if (route.name === "Settings") iconName = focused ? "settings" : "settings-outline";
+          else if (route.name === "Group") iconName = focused ? "people" : "people-outline";
 
-          return <Ionicons name={iconName} size={TAB_CONFIG.iconSize} color={color} />;
+          // 3. Get the active background color and icon color from the maps
+          const activeBackgroundColor = activeTabColors[route.name];
+          const activeIconColor = activeIconColors[route.name];
+
+          return (
+            <View
+              style={[
+                styles.iconContainer,
+                // 4. Apply the dynamic background color when focused
+                focused && [
+                  styles.activeIconContainer,
+                  { backgroundColor: activeBackgroundColor },
+                ],
+              ]}
+            >
+              <Ionicons
+                name={iconName}
+                size={TAB_CONFIG.iconSize}
+                color={focused ? activeIconColor : TAB_CONFIG.inactiveColor}
+              />
+            </View>
+          );
         },
       })}
     >
       <Tab.Screen name="Home" component={Home} />
       <Tab.Screen name="Profile" component={Profile} />
       <Tab.Screen name="Group" component={GroupScreen} />
-      <Tab.Screen name="Settings" component={SettingsScreen} />
+      <Tab.Screen name="Settings" component={Setting} />
     </Tab.Navigator>
   );
 }
@@ -77,7 +95,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#dae4ed",
+    backgroundColor: "#f5f7fa",
   },
   text: {
     fontSize: 20,
@@ -86,19 +104,38 @@ 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,
+    elevation: 10,
+    paddingBottom: Platform.OS === "ios" ? 25 : 10,
     paddingTop: 10,
-    borderTopWidth: 0,
+    marginHorizontal: 10,
+  },
+  label: {
+    fontSize: 12,
+    marginBottom: 5,
+  },
+  iconContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    width: 50, // Reduced size for a sleeker look
+    height: 50, // Reduced size
+    marginTop: 10,
+    borderRadius: 15,
+  },
+  activeIconContainer: {
+    // The default active style, background color is now applied dynamically
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 5,
   },
 });