homePage update

src/navigation/BottomTabs.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { BottomTabNavigationProp, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { View, Text, StyleSheet, Platform } from "react-native";
 import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
 import GroupScreen from "../screens/GroupScreen";
@@ -9,7 +9,6 @@ import colors from "../components/colors";
 import Setting from "../screens/setting/Setting";
 import ManagementScreen from "../screens/management/ManagementScreen";
 
-const Tab = createBottomTabNavigator();
 
 const TAB_CONFIG = {
   activeColor: "#000",
@@ -29,26 +28,24 @@ const activeTabColors: { [key: string]: string } = {
 
 // Icon/Text colors on active tabs
 const activeIconColors: { [key: string]: string } = {
-    Home: "#333",
-    Profile: "#333",
-    Group: "#333",
-    Management: "#333",
+  Home: "#333",
+  Profile: "#333",
+  Group: "#333",
+  Management: "#333",
 }
 
 
-function HomeScreen() {
-  return (
-    <View style={styles.screen}><Text style={styles.text}>🏠 Home</Text></View>
-  );
-}
+export type RootTabParamList = {
+  Home: undefined;
+  Profile: undefined;
+  Group: undefined;
+  Management: { actionTab?: "My Groups" | "Joined Groups" | "Requests" | "Your Requests" };
+};
+// Define the navigation prop type for screens within the tab navigator
+export type TabNavigationProp = BottomTabNavigationProp<RootTabParamList>;
+const Tab = createBottomTabNavigator<RootTabParamList>();
 
-function SettingsScreen() {
-  return (
-    <View style={styles.screen}><Text style={styles.text}>⚙️ Settings</Text></View>
-  );
-}
-
-export default function BottomTabs() {
+const BottomTabs: React.FC = () => {
   return (
     <Tab.Navigator
       screenOptions={({ route }) => ({
@@ -62,7 +59,7 @@ export default function BottomTabs() {
 
         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";
@@ -151,3 +148,4 @@ const styles = StyleSheet.create({
     shadowRadius: 5,
   },
 });
+export default BottomTabs