Merge branch 'pooja' of https://git.zeptic.in/abintoppo_lincpay/CircleCollect into feature_profile

src/navigation/BottomTabs.tsx

@@ -1,9 +1,12 @@
 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();
 
@@ -15,15 +18,15 @@ const TAB_CONFIG = {
   iconSize: 28,
 };
 
-// 1. Define a color map for active tabs
+// Background (tab highlight) colors
 const activeTabColors: { [key: string]: string } = {
-  Home: "#ff7675", // A soft red
-  Profile: "#74b9ff", // A nice blue
-  Group: "#55efc4", // Your theme's green
-  Settings: "#ffeaa7", // A gentle yellow
+  Home: colors.pastelPink,     // Soft pink
+  Profile: colors.pastelBlue,  // Light sky blue
+  Group: colors.pastelGreen,    // Gentle mint green
+  Settings: colors.pastelOrange, // Warm pastel yellow
 };
 
-// 2. Define a text color map for contrasting icon colors
+// Icon/Text colors on active tabs
 const activeIconColors: { [key: string]: string } = {
     Home: "#333",
     Profile: "#333",
@@ -57,7 +60,7 @@ export default function BottomTabs() {
           ) : null,
 
         tabBarIcon: ({ focused }) => {
-          let iconName: string = "home-outline";
+          let iconName: IoniconsIconName = "home-outline";
           
           // Determine icon based on route
           if (route.name === "Home") iconName = focused ? "home" : "home-outline";
@@ -90,10 +93,10 @@ export default function BottomTabs() {
         },
       })}
     >
-      <Tab.Screen name="Home" component={HomeScreen} />
+      <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>
   );
 }