group creation themed

src/navigation/AppNavigator.tsx

@@ -4,18 +4,19 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { View, Text, Button } from "react-native";
 import LoginScreen from "../screens/LoginScreen";
 import OtpVerificationScreen from "../screens/OtpVarificationScreen";
-import BottomTabs from "./BottomTabs";
 import SplashScreen from "../screens/SplashScreen";
+import Profile from "../screens/profile/Profile";
 import OrganizerRegisterScreen from "../screens/OrgnizerRagister";
 import GroupCreation from "../screens/GroupCreation";
 import GroupReview from "../screens/GroupReview";
+import BottomTabs from "./BottomTabs";
 
 const Stack = createNativeStackNavigator();
- export type RootStackParamList = {
+export type RootStackParamList = {
   Login: undefined;
-  OtpVarify:{ mobile: string };
-  Home:undefined
-  HomeTabs:undefined
+  OtpVarify: { mobile: string };
+  Home: undefined
+  HomeTabs: undefined
   splash: undefined
   OrganizerRegister:undefined
   Profile: undefined;
@@ -35,13 +36,7 @@ function HomeScreen() {
   );
 }
 
-function ProfileScreen() {
-  return (
-    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
-      <Text>Profile Screen</Text>
-    </View>
-  );
-}
+
 
 export default function AppNavigator() {
   const linking = {
@@ -55,12 +50,12 @@ export default function AppNavigator() {
   return (
     <NavigationContainer linking={linking}  >
       <Stack.Navigator initialRouteName="Splash">
-        <Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }}  />
-        <Stack.Screen name="HomeTabs" component={BottomTabs} options={{ headerShown: false }}  />
-        <Stack.Screen name="Login" component={LoginScreen}   options={{ headerShown: false }} />
+        <Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />
+        <Stack.Screen name="Home" component={BottomTabs} options={{ headerShown: false }} />
+        <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
+        <Stack.Screen name="OtpVarify" component={OtpVerificationScreen} options={{ headerShown: false }} />
          <Stack.Screen name="OrganizerRegister" component={OrganizerRegisterScreen}   options={{ headerShown: false }} />
-        <Stack.Screen name="OtpVarify" component={OtpVerificationScreen}   options={{ headerShown: false }} />
-        <Stack.Screen name="Profile" component={ProfileScreen} options={{ headerShown: false }}/>
+        <Stack.Screen name="Profile" component={Profile} options={{ headerShown: false }}/>
          <Stack.Screen name="GroupCreation" component={GroupCreation}options={{ headerShown: false }} />
          <Stack.Screen name="GroupReview" component={GroupReview}options={{ headerShown: false }} />
       </Stack.Navigator>

src/navigation/BottomTabs.tsx

@@ -1,33 +1,46 @@
 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"; // ✅ corrected import
+import { Ionicons } from "@react-native-vector-icons/ionicons";
 import GroupScreen from "../screens/GroupScreen";
-import ProfileScreen from "../screens/ProfileScreen";
+import Profile from "../screens/profile/Profile";
 
 const Tab = createBottomTabNavigator();
 
 const TAB_CONFIG = {
-  activeColor: "#000", 
-  inactiveColor: "#8e8e93", 
+  activeColor: "#000",
+  inactiveColor: "#8e8e93",
   backgroundColor: "#fff",
   height: 70,
   iconSize: 26,
 };
 
+// 1. Define a color map for active tabs
+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
+};
+
+// 2. Define a text color map for contrasting icon colors
+const activeIconColors: { [key: string]: string } = {
+    Home: "#333",
+    Profile: "#333",
+    Group: "#333",
+    Settings: "#e17055",
+}
+
+
 function HomeScreen() {
   return (
-    <View style={styles.screen}>
-      <Text style={styles.text}>🏠 Home</Text>
-    </View>
+    <View style={styles.screen}><Text style={styles.text}>🏠 Home</Text></View>
   );
 }
 
 function SettingsScreen() {
   return (
-    <View style={styles.screen}>
-      <Text style={styles.text}>⚙️ Settings</Text>
-    </View>
+    <View style={styles.screen}><Text style={styles.text}>⚙️ Settings</Text></View>
   );
 }
 
@@ -36,32 +49,41 @@ export default function BottomTabs() {
     <Tab.Navigator
       screenOptions={({ route }) => ({
         headerShown: false,
-        tabBarShowLabel: true, // ✅ no labels, only icons
         tabBarStyle: styles.tabBar,
-        
-        tabBarIcon: ({ color, focused }) => {
-          let iconName: string = "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")
-            iconName = focused ? "settings" : "settings-outline";
-          else if (route.name === "Group")
-            iconName = focused ? "people" : "people-outline";
+        tabBarLabel: ({ focused, color }) =>
+          !focused ? (
+            <Text style={[styles.label, { color }]}>{route.name}</Text>
+          ) : null,
+
+        tabBarIcon: ({ focused }) => {
+          let iconName: string = "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";
+
+          // 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,
-                focused && styles.activeIconContainer,
+                // 4. Apply the dynamic background color when focused
+                focused && [
+                  styles.activeIconContainer,
+                  { backgroundColor: activeBackgroundColor },
+                ],
               ]}
             >
               <Ionicons
                 name={iconName}
                 size={TAB_CONFIG.iconSize}
-                color={focused ? "#fff" : TAB_CONFIG.inactiveColor}
+                color={focused ? activeIconColor : TAB_CONFIG.inactiveColor}
               />
             </View>
           );
@@ -69,7 +91,7 @@ export default function BottomTabs() {
       })}
     >
       <Tab.Screen name="Home" component={HomeScreen} />
-      <Tab.Screen name="Profile" component={ProfileScreen} />
+      <Tab.Screen name="Profile" component={Profile} />
       <Tab.Screen name="Group" component={GroupScreen} />
       <Tab.Screen name="Settings" component={SettingsScreen} />
     </Tab.Navigator>
@@ -95,7 +117,7 @@ const styles = StyleSheet.create({
     right: 20,
     height: TAB_CONFIG.height,
     backgroundColor: TAB_CONFIG.backgroundColor,
-    borderRadius: 20 ,
+    borderRadius: 20,
     shadowColor: "#000",
     shadowOpacity: 0.1,
     shadowOffset: { width: 0, height: 5 },
@@ -103,17 +125,25 @@ const styles = StyleSheet.create({
     elevation: 10,
     paddingBottom: Platform.OS === "ios" ? 25 : 10,
     paddingTop: 10,
-    marginHorizontal:10
+    marginHorizontal: 10,
+  },
+  label: {
+    fontSize: 12,
+    marginBottom: 5,
   },
   iconContainer: {
     justifyContent: "center",
     alignItems: "center",
-    width: 60,
-    height: 60,
-    marginTop:10,
+    width: 50, // Reduced size for a sleeker look
+    height: 50, // Reduced size
+    marginTop: 10,
     borderRadius: 15,
   },
   activeIconContainer: {
-    backgroundColor: "#000", // active circle background
+    // The default active style, background color is now applied dynamically
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 5,
   },
 });