botton navi...

src/screens/management/ManagementTabNavigation.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { View, Text, StyleSheet, Platform, TouchableOpacity } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Ionicons from 'react-native-vector-icons/Ionicons'; // Correct import for react-native-vector-icons
+
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RootStackParamList } from '../../navigation/AppNavigator'; // Adjust path
+import EditGroupScreen from './EditGroupScreen'; // Your screen component
+import Payments from './Payments';
+import Member from './Member';
+
+type Props = NativeStackScreenProps<RootStackParamList, 'ManagementTabs'>;
+
+const Tab = createBottomTabNavigator();
+
+// --- Custom Floating Tab Bar Component ---
+import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+
+const FloatingTabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={[styles.tabBarContainer, { bottom: insets.bottom > 0 ? insets.bottom : 16 }]}>
+      {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key];
+        const label = options.tabBarLabel ?? options.title ?? route.name;
+        // A custom option to pass the icon name
+        const iconName = options.tabBarIconName ?? 'help-circle'; 
+
+        const isFocused = state.index === index;
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name, route.params);
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        return (
+          <TouchableOpacity
+            key={route.key}
+            accessibilityRole="button"
+            accessibilityState={isFocused ? { selected: true } : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel}
+            testID={options.tabBarButtonTestID}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            style={styles.tabItem}
+          >
+            <Ionicons
+              name={iconName}
+              size={24}
+              color={isFocused ? '#4F46E5' : '#6B7280'}
+            />
+            <Text style={[styles.tabLabel, { color: isFocused ? '#4F46E5' : '#6B7280' }]}>
+              {label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+// --- Main Tab Navigator Component ---
+const ManagementTabNavigation: React.FC<Props> = ({ route }) => {
+  const { groupId } = route.params 
+
+  return (
+    <Tab.Navigator
+      // Assign the custom floating tab bar
+      tabBar={props => <FloatingTabBar {...props} />}
+      screenOptions={{
+        headerShown: false, // Hides the default header for all screens in the tab
+      }}
+    >
+      <Tab.Screen
+        name="EditGroup"
+        component={EditGroupScreen}
+        // Pass the groupId to the EditGroupScreen as an initial parameter
+        initialParams={{ groupId }}
+        options={{
+          tabBarLabel: 'Settings',
+          // Custom prop to define the icon for our FloatingTabBar
+      
+        }}
+      />
+            <Tab.Screen
+        name="Payments"
+        component={Payments}
+        // Pass the groupId to the EditGroupScreen as an initial parameter
+        initialParams={{ groupId }}
+        options={{
+          tabBarLabel: 'Payments',
+
+
+        }}
+      />
+          <Tab.Screen
+        name="Member"
+        component={Member}
+        // Pass the groupId to the EditGroupScreen as an initial parameter
+        initialParams={{ groupId  }}
+        options={{
+          tabBarLabel: 'Members',
+       
+        }}
+      />
+      {/* You can easily add more tabs here in the future */}
+    </Tab.Navigator>
+  );
+};
+
+// --- Styles ---
+const styles = StyleSheet.create({
+  tabBarContainer: {
+    flexDirection: 'row',
+    position: 'absolute',
+    left: 30,
+    right: 30,
+    backgroundColor: 'white',
+    borderRadius: 60,
+    paddingVertical: 4,
+    alignItems: 'center',
+    justifyContent: 'space-around',
+
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 10,
+    elevation: 8,
+  },
+  tabItem: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 8,
+  },
+  tabLabel: {
+    fontSize: 12,
+    marginTop: 4,
+    fontWeight: '600',
+  },
+});
+
+export default ManagementTabNavigation;